En este tutorial aprenderas a crear atractivos botones animados que imitan el comportamiento real de un botón fisico, todo eso sin usar ni una sola imagen ni javascript.
Estructura HTML
Trabajaremos con 3 enlaces que serviran de botones , todos tendrán el mismo efecto pero con colores diferentes, nota las clases que usaremos para identificar cada uno de ellos:
<a class="button azul">Hazme clic</a>
<a class="button beige">Hazme clic</a>
<a class="button rojo">Hazme clic</a>
Código
CSS
[/align]
Empezaremos con unas propiedades básicas para el body y para el boton(estilos tipográficos, padding, margins
body{
background: #d0d9d6;
padding-top: 15%;
text-align: center;
}
.button{
/* estilos tipograficos */
color: #fff;
font-family: sans-serif;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
/* padding, margin y borde */
padding: 20px 40px;
margin-right: 30px;
cursor: pointer;
border: 0;
border-radius: 50px;
/* propiedades para la animacion */
transition: all 0.20s linear;
-webkit-transition: all 0.20s linear;
-moz-transition: all 0.20s linear;
position: relative;
bottom: 0;
}
.azul{
background: #04a8bf;
box-shadow: 0px 5px 0 #0491a5;
}
.beige{
box-shadow: 0px 5px 0 #7e8783;
background: #9ca6a2;
}
.rojo{
background: #bf1b04;
box-shadow: 0px 5px 0 #8F1502;
}
Animando el boton
La animación del boton esta pensada para que se ejecute cuando este sea presionado, entonces necesitamos crear selectores que apunten a este evento.
.button:active{
bottom: -5px;
}
El primer selector es uno general que va a seleccionar a todos los elementos que tengan de clase .button y le diremos que cuando este sea presionado
active) se cambie el valor de la propiedad bottom a -5px de esta manera hacemos que el elemento se agache un poco como si realmente estuviese presionado:
En este punto ya podemos notar que el transition que definimos al inicio esta tomando efecto y animando el boton cuando este es presionado, sin embargo podemos mejorar aun este efecto, para ello vamos a definir otros 3 selectores del tipo :active para cada uno de los botones :
.azul:active{
}
.beige:active{
}
.rojo:active{
}
Lo que haremos sera hacer que el box-shadow que le daba aquella sensación tridimensional se esfume cuando el boton sea presionado imitando así el comportamiento real de un botón fisico.
.azul:active{
box-shadow:0 0 0 #0491a5, inset 0 0 5px rgba(0, 0, 0, 0.4);
}
.beige:active{
box-shadow:0 0 0 #7e8783, inset 0 0 5px rgba(0, 0, 0, 0.4);
}
.rojo:active{
box-shadow:0 0 0 #9a1604, inset 0 0 5px rgba(0, 0, 0, 0.4);
}
Ademas de ello vamos a agregar una sombra interna que tenga de color un valor rgba(0, 0, 0, 0.4), que traducido seria red=0 green=0 blue=0 y alpha=0.4 haciendo un color negro pero un poco transparente:
Ten en cuenta que este efecto no se va a poder apreciar en versiones arcaicas de navegadores(IE6, FF2) ya que estos no soportan la propiedad transition y menos aun box-shadow.
Y con eso termino este tutorial espero les haya gustado y servido
demo