Crear botones con propiedades CSS3

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.