Como Hacer un Botón Animado Usando solo CSS3

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.