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
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;
}
Para hacer la animación usaremos la propiedad de CSS3 transition, esta propiedad sirve para crear una transición que se activa cuando el elemento seleccionado cambie o sea afectado por un evento.
Los parámetros que podemos poner en transition son: la propiedad CSS que sera animada, duración de la transición y por ultimo se define un «timing function» este valor es para definir como sera la animación, para este ejemplo usaremos linear que vendría a ser una transición normal(puedes ver todos los tipos de timing functions en este enlace).
Si probamos esta pagina veremos solo un fondo con 3 textos blancos:
Ahora definiremos los colores de fondo y los box-shadow que le daran un efecto tridimensional a los botones:
.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;
}
Resultado
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 boton 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.