CREAR BOTONES CON CSS3

Hola amigos aca les dejo un tutorial de css3 con el que podrán hacer botones sin necesidad de javascript y sin mas palabras comencemos.

A la técnica a la que hago referencia es tomada de Zurb, la cual funciona para los anchor a obutton.

Basicamente se trata de combinar algunas de las nuevas reglas CSS3 como text-shadow, box-shadow y border-radius junto con el uso correcto de RGBa

Comencemos

Nuestro markup

<button class="large button blue" type="submit">Super Cool Button</button>

Como lo menciones anteriormente funciona tanto para los anchor a o button

CSS Básico

Este seria el esqueleto de nuestro botón de esta class se van a apoyar luego otras para dar el efecto final.

.button
{
 background: #222 url(images/overlay-button.png) repeat-x 0 0;/* Pequeño PNG que funciona a modo de gradient */
 border-bottom: 1px solid rgba(0,0,0,0.25);/* Borde negro con transparencia en 25%*/
 color: #fff !important;
 cursor: pointer;
 display: inline-block;/* Alinear corectamente el boton*/
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 -moz-border-radius: 5px;/* Borde para Firefox */
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Firefox*/
 overflow: visible;/* contedido sobrante visible*/
 padding: 5px 15px 6px;
 position: relative;
 text-decoration: none;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);/* Sombra negra en 25% para el texto */
 webkit-border-radius: 5px;/* Borde para Webkit*/
 webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);/* Sombra negra en 25% para Webkit*/
 width: auto;/* Importante para que el boton se ajuste a nuestro texto */
}

Estados del boton

Para este caso solo vamos a personalizar el hover y el active para dar el efecto al presionar el botón y posicionar el cursor sobre él.

.button:hover
{
 background-color: #111;
 color: #fff;
}
.button:active
{
 top: 1px;
}

Tamaños del boton

Tenemos tres tamaños para “jugar” con nuestro botón. El medium, que seria el aplicado por defecto, el small un poco mas reducido en su tamaño; y el large un poco mas grande, obviamente gracias al padding que le aplicamos.

.small.button
{
 font-size: 11px;
}
.large.button
{
 font-size: 14px;
 padding: 8px 19px 9px;
}

Estilo del boton

Dejo como ejemplo un botón de color azul-claro. Podes ajustar aquí el color del botón a tus necesidades

.blue.button
{
 background-color: #2daebf;
}
.blue.button:hover
{
 background-color: #007d9a;
}

Nuestro boton final

Hemos terminado con nuestra hoja de estilo por lo cual procedemos al markup en HTML:

<button class="large button blue" type="submit">Super Cool Button</button>

Y se vería de la siguiente forma:

Conclusiones

Como lo podes observar el botón es muy simple de implementar, y lograras un resultado casi uniforme en todos los navegadores. Una de las contras que tiene esta técnica es que ciertas propiedades de CSS3 no son 100% soportadas por todos los navegadores, pero el resultado sera ligeramente similar. También te recomiendo que leas en Zurb un poco mas sobre esta técnica y experimentes para poder lograr un botón que adapte a tus exigencias.

Fuente: eliseos.net