En este tutorial aprenderas a hacer un boton bastante realista usando solamente propiedades exclusivas de CSS3.
HTML Base
Empezamos con un HTML vacio y con un elemento button que llevara la clase de .botoncito.
Ademas de un espacio del CSS correspondiente.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title></title> <style> .botoncito{ } .botoncito:active{ } </style> </head> <body> <button class="botoncito">Comprar</button> </body> </html>
Si pruebas esto veras un boton con los estilos predefinidos de tu sistema operativo, empezaremos reseteando estos estilos, para eso añade la siguiente propiedad:
button::-moz-focus-inner { border: 0; } /* FIX para Firefox */ .botoncito{ border:0; }
Basta con añadir border:0; y los estilos por defecto se van.
Ademas le agregaremos un poco de espacio, tamaño y color de fuente:
.botoncito{ border:0; color: #668428; font-size: 48px; font-family:sans-serif; padding: 30px 50px; }
Fondo de gradiente CSS3
Ahora nos toca agregar el fondo, usaremos un gradiente CSS3 (tanto para navegadores -moz- como para -webkit-):
.botoncito{ border:0; color: #668428; font-size: 48px; font-family:sans-serif; padding: 30px 50px; background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); }
Bordes redondeados
Para los bordes redondeados usaremos la propiedad CSS3 border-radius:
.botoncito{ border:0; color: #668428; font-size: 48px; font-family:sans-serif; padding: 30px 50px; background: -moz-linear-gradient(center top , #CDEB8E 0%, #A5C956 100%) repeat scroll 0 0 transparent; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdeb8e), color-stop(100%,#a5c956)); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
Con esto vemos que va tomando forma:
Texto con sombra
Vamos a mejorar ahora el texto, haciendo uso de text-shadow para darle un efecto de texto en bajo relieve:
text-shadow: 1px 1px 1px #E1FEA6;
Si lo vemos con detenimiento podemos notar el efecto:
Sombra del elemento
Para darle un poco mas de realismo le añadiremos tambien una sombra al boton en si, usaremos moz-box-shadow para Firefox y -webkit-box-shadow para Chrome y la version oficial sin prefijos:
box-shadow: 0px 6px 0 #819F45; -moz-box-shadow: 0px 6px 0 #819F45; -webkit-box-shadow: 0px 6px 0 #819F45;
El resultado:
Estado :active
Esta es la parte que le dara mas realismo a nuestro boton, cuando le agregemos los estilos para cuando el boton sea ‘presionado’ (:active).
Lo primero que haremos es hacer que cuando sea presionado el boton, se mueva 3px hacia abajo:
.botoncito:active{ position:relative; top:3px; }
Lo segundo es decirle que el valor vertical del -box-shadow pase de 6px a 3px, dandole un efecto de presionado al boton:
.botoncito:active{ position:relative; top:3px; box-shadow: 0px 3px 0 #819f45; -moz-box-shadow:0px 3px 0 #819F45; -webkit-box-shadow:0px 3px 0 #819F45; }
Con eso ya estaria bien, pero si queremos podemos hacer que los colores de los gradientes se inviertan, para darle aun mas realismo:
.botoncito:active{ position:relative; top:3px; box-shadow:0px 3px 0 #819F45; -moz-box-shadow:0px 3px 0 #819F45; -webkit-box-shadow:0px 3px 0 #819F45; background: -moz-linear-gradient(center top , #A5C956 0%, #CDEB8E 100%) repeat scroll 0 0 transparent; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5c956), color-stop(100%,#cdeb8e)); }
Con eso finalizamos nuestro boton, espero te haya gustado y prueba a mejorarlo agregandole mas efectos.