¿Cómo crear botones con CSS?

Cuando no existían los botones con CSS, los maquetadores y diseñadores tenían que hacerlos a base de imágenes. De hecho cuando la moda de los bordes redondeados llego a la web, se inventaron varias soluciones para lograr dicho efecto.

Hoy en día, salvo algunas excepciones, usar imágenes para los botones no tiene sentido. Por eso quiero mostrarles algunos tips para crear un buen botón.

Botones con CSS usando padding

Antaño solía crear botones con CSS usando padding. La técnica consiste en agregar un padding a nuestro contenedor principal de tal manera que el texto quede alineado vertical y horizontalmente.

El problema con esta técnica es que no tenemos control en el tamaño final de nuestro botón. Esto sucede por la forma en que el modelo de caja funciona: width+padding+border = tamaño final de la caja.

Botones con CSS usando padding

 

Imaginemos que queremos crear un botón con unas dimensiones de 140px X 40px. Tomando como referencia el modelo de caja tradicional tenemos que crear un ancho de 120px y agregar un padding de 10px para lograr obtener el resultado deseado.

Botones con CSS usando padding 2

 

Como mencione en un principio el problema con esta técnica es que no tenemos un control en las dimensiones de nuestro botón, en este caso creamos un botón de 140px X 40px, el cual funciona cuando el tamaño de la fuente es el predefinido por el navegador (comúnmente 16px), ¿Qué pasa si aumentamos el tamaño de la fuente?, en el siguiente ejemplo vemos lo que sucede.

Si lo que queremos es no preocuparnos por las medidas podemos usar la propiedad box-sizing:border-box; la cual básicamente viene a cambiar el modelo de caja tradicional con esta propiedad las medidas definidas se mantienen fijas y el border y padding se aplican de manera interna.

Botones con CSS ejemplo 3

 

Veamos ahora como se verían nuestros botones, con esta propiedad y definiendo por defecto una medida para nuestro botón de 140px X 40px:

Si bien podemos observar que las proporciones de nuestros botones se mantienen también vemos que el tamaño del texto sigue siendo un problema.

Botones con CSS usando line-height

Actualmente creo botones con CSS usando line-height, un método que a mi entender es el que mejor funciona. Con la ayuda de la propiedad line-height podemos alinear verticalmente el texto del botón y su vez podemos jugar un poco con el tamaño de la fuente, no afectando el tamaño de nuestro botón.

Lo único que tenemos que hacer es definir un valor igual al tamaño que deseamos de alto en nuestro botón, por ejemplo, si nuestro botón es de un alto de 40px entonces el valor de line-height será: 40px. Como dato mencionar que en esta técnica podemos omitir el alto de nuestro botón pero para fines prácticos me gusta definir el ancho en el código CSS. A continuación podemos ver nuestro botones con diferentes tamaños de fuente, los cuales mantienen las medidas perfectas, logrando un buen resultado.

Como se observa en el ejemplo el resultado es satisfactorio. Ahora la pregunta es: ¿Utilizan otra técnica para realizar sus botones?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *