X
    Categorías: Ejemplos CSS

Crear botones con propiedades CSS3

En este artículo prácticamos la estilización de botones con CSS3, utilizando gradientes, sombras y bordes

Cubrir los conceptos básicos de un tema es fundamental en cualquier ámbito donde nos desarrollemos, gracias a esto podremos establecer las bases necesarias para el correcto aprendizaje, lo que nos permitirá lograr un buen enfoque y una mejor comprensión de temas más complejos.

Uno de estos temas considerados por varios como elementales al momento de empezar a diseñar mediante CSS, es la elaboración y estilización de elementos de un formulario, como lo es el caso de los botones los cuales siempre hacen resaltar o en otros casos deslucir el ambiente de una página.

¿Cómo se hacían botones antes de CSS3?

En el pasado era de lo más común tener que recurrir a programas de edición de imágenes para poder lograr un buen efecto en nuestros botones. El sombreado, las fuentes estilizadas y el aspecto tridimensional tenía que ser aplicado mediante las herramientas que nos proporcionaba Photoshop, Corel Draw o algún otro programa de diseño que teníamos a la mano, y una vez concluida la imagen debíamos complementar con trabajo en HTML y CSS.

Para el caso de CSS se tenía que hacer uso de pseudo selectores, particularmente para captar los eventos de colocación del mouse y activación del botón lo que permitía cambiar la imagen de fondo o modificar su posición, para así dar un efecto de “aplastado” al botón.

Al principio puede parecer fácil crear tres o cuatro imágenes distintas para un sólo botón pero cuando cuentas con varios elementos del mismo tipo que tienen distintos estilos, la cosa se complica, por lo que se empezó a optar por tener una sola imagen para cada botón y en esa misma imagen tener representado cada uno de los eventos.

El tener una sola imagen de fondo representaba un menor tiempo de descarga de la página y agilizaba el desempeño del sitio, es por ello que era muy común encontrar en nuestras hojas de estilos sentencias como:

a.btnAzul{
background: url("botonazul.png");
}
a.btnAzul:hover, a.btnAzul:focus{
background-position: 0 -124px;
}

a.btnAzul:active{
background-position: 0 -248px;
}

Las cuales mediante la propiedad “background-position” y con valores negativos se encargaban de mover la imagen que se mostraba como fondo de nuestro botón.

Si bien esto vino a simplificar y reducir el tiempo de carga de la página, aún así teníamos que crear de una a tres imágenes por cada botón o por cada estilo con el que contaba la página, esto representaba tiempo y la necesidad de tener conocimiento en algún programa de diseño para poder utilizarlo.

Pero todo esto quedo en el olvido al momento de que CSS3 implementó todos los efectos necesarios para llevar a cabo esta clase de ediciones, y ahora el diseño de botones CSS3 se puede hacer directamente en nuestro código.

Diseño de botones con CSS3

El uso de gradientes, sombras, bordes redondeados y transiciones de manera combinada mediante CSS nos permite crear botones con estilos a granel. La poca dependencia de esta manera de desarrollo hace que el diseñador se sienta más libre y pueda experimentar con distintos colores en el mismo código fuente de la página.

En este artículo realizaremos un ejemplo de botón basado en los típicos estilos que vamos a encontrar en casi cualquier sitio web. Utilizaremos un div contenedor con un elemento de tipo link que funcionará como “tablet”, a dicho elemento le aplicaremos bordes, gradientes y sombreado para dar un aspecto tridimensional.

El texto del botón también será editado mediante CSS y lucirá con sombras para dar un efecto de profundidad.

Estructura HTML del boton

Nuestra estructura HTML tal y como fue descrita anteriormente, quedaría de la siguiente manera:

<div id="contenedor">
    <a href="#" class="btnAzul">Da Click</a>
</div>

Como se puede apreciar es una estructura bastante simple y lo fundamental de ella es elemento de anclaje, el cual recibe una clase a la que hemos llamado “btnAzul” y será la encargada de recibir todos los efectos mediante CSS.

Estilos CSS3 para el botón

Nuestro código CSS comenzará con algunos estilos básicos de configuración lo que nos permitirá apreciar mejor el elemento.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;
}

Un elemento de anclaje es por defecto de tipo “inline” ya que son utilizados para mostrar y representar links, en nuestro caso queremos un “tablet” por lo que se vuelve necesario cambiar el tipo de display a tipo bloque y para ello declaramos la sentencia “display: block”. Esto permitirá que especifiquemos un ancho y una altura para el elemento, para finalmente agregar un “padding” en la parte superior para separar el texto del borde y el margen “auto” se encargará de centrar dicho texto.

Después de establecer el elemento base, pasamos a darle formato y edición.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;
   
    background: #4682B4;
    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #62C2F9;
    border-radius: 10px;
}

La propiedad “box-shadow” nos servirá para darle un efecto de resplandor interno, muy parecido al que se puede dar con Photoshop. Al agregar la propiedad “inset” hace que la sombra se coloque al interior del elemento, contrario al comportamiento natural de la propiedad que agrega el efecto en el exterior.

En esta ocasión no vamos a utilizar los parámetros de “offset” en ninguno de los ejes de la sombra, pero si utilizaremos la propiedad “blur” para agregar un tipo de borrando y suavizar el efecto de flujo. A esto adicionamos un borde simple de 1 píxel de ancho y las esquinas se redondean mediante la propiedad border-radius.

Después de tener establecido el estilo para el fondo de nuestro botón, pasamos a establecer el estilo del texto.

a.btnAzul {
    display: block;
    width: 250px;
    height: 60px;
    padding: 25px 0 0 0;
    margin: 0 auto;
   
    background: #4682B4;
    background: -moz-linear-gradient(top, #87CEEB 0%, #4682B4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87CEEB), color-stop(100%,#4682B4));

    box-shadow: inset 0px 0px 6px #fff;
    -webkit-box-shadow: inset 0px 0px 6px #fff;
    border: 1px solid #62C2F9;
    border-radius: 10px;

    font: bold 25px Helvetica, Sans-Serif;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #3090C7;
    text-shadow: 0px 1px 2px #62C2F9;
}

Establecemos el tipo de fuente, su tamaño, lo alineamos al centro del elemento, transformamos todas las letras a mayúsculas para darle uniformidad, quitamos todo tipo de decoración, definimos su color y finalmente establecemos un sombreado para darle un efecto de inserción. Lo que hacemos con la propiedad “text-shadow” es básicamente darle 1 píxel de offset en el eje Y y crear un blur de 2 píxeles.

El resultado final:

Y aquí el ejemplo funcionando: Botones con CSS3

Con esto se logra obtener un botón de diseño sencillo pero que atrae, a partir de aquí podemos utilizar pseudo selectores si queremos y hacer uso de estos mismos efectos para diseñar el botón cuando el mouse se posicione sobre él o le de click.

modificado el 9 noviembre, 2012 0:35

Daniel Ernesto Navarro Herrera: Lleva trabajando como desarrollador web desde hace más de 10 años. Es un apasionado del código, habiendo tocado todos los palos, especialmente PHP, MySQL, JavaScript, incluyendo frameworks y librerías como jQuery, Symfony, CakePHP...

Ver comentarios (6)

  • Hola,

    Me parece un aporte estupendo, pero yo tengo otro problema.

    Y es que tengo un botón cuyo texto en muy largo, entonces en PC se ve bien, pero quisiera que en móvil el tamaño del botón se ajuste a la pantalla y que el texto no se corte.

    Es decir, ahora cuando veo la web en móvil, el botón del formulario de contacto "se sale de la pantalla" porque el texto es largo, y en lugar de hacer más alto el botón y ajustar el texto a su ancho, simplemente lo deja como está con lo que se sale de la pantalla y no se lee bien el texto.

    No sé si me he explicado y si me puedes echar un cable con eso.

    Gracias de antemano.

    • Hola David,

      Si si, te he entendido :)

      Seguramente sea por alguna propiedad CSS que esté impidiendo que el texto caiga a dos líneas.

      Si es un input, tiene propiedades por defecto que afectan a eso.

      Prueba a darle la propiedad white-space: normal; o word-break: normal;

      Son propiedades que suelen estar relacionadas.

      Saludos!

  • Y si lo quiero en rosa? Debo cambiar todos los colores pero que escala de tonos debo utilizar?

  • El ejemplo es excelente, sólo tengo una duda en cuanto a la semántica del sitio en el que se use el botón ¿esta sería afectada negativamente al no usar el tipo button?

Artículos relacionados