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.