Cómo crear un efecto Hover animado a un botón con CSS3

Hace una semana presenté mi proyecto final de Interacción Humano-Computadora, en la cuál implementé un botón muy gracioso que actúa con CSS3, y hoy les quiero compartir cómo funciona.

El botón muestra una pequeña flecha apareciendo desde arriba para colocarse debajo del texto del botón, todo animado,y eso es lo que vamos a aprender a hacer hoy, un efecto hover animado a un botón con CSS3.

Nivel del tutorial: Intermedio
Tutorial terminado: Demo del tutorial
Material necesario: Flecha

Breve explicación

El botón que vamos a implementar tiene un efecto que hace que una pequeña flecha se desplace de arriba a abajo para quedarse debajo de un texto, todo esto usando la propiedad ‘transition’ y el selector :hover para lograr el efecto.

HTML

Para lograr que el botón actúe como un link grande tenemos que insertar en un link una capa, la cuál vamos a hacerla grande y le demos la forma de un cuadrado.

Fíjense que la capa tiene una clase llamada ‘boton’ que vamos a usar adelante

CSS

Ahora si viene lo interesante. Para empezar hay que declarar las propiedades para nuestra clase ‘.boton’ como el color de fondo, el color de texto, un ancho, un alto y un padding, o espaciado interior.+

Noten que para centrarlo verticalmente use el padding, y recortando la altura el número de pixeles del padding, para que sumados fueran 200px, como el ancho.

Otra cosa es la imagen de fondo, porque le añadí una posición inicial que es fuera del margen del botón, para que no se vea en el estado normal del botón.

Por último le añadí la propiedad ‘transition’ para activar la animación de cualquier cambio que encuentre en las propiedades cuando configuremos el efecto ‘:hover’.

Este es el :hover en donde sólo modificamos el color de fondo y la posición de nuestra flecha. Recuerden que la posición está dada primero horizontalmente y después verticalmente, por lo que si se fijan sólo moví la flecha verticalmente.

Y si todo ha salido como les expliqué ya debería estar funcionando su botón con efecto hover en el fondo