La llegada de CSS ha abierto un mundo de posibilidades para los diseñadores web, las capacidades se han aumentado con el uso de CSS3. Actualmente se cuenta con una variedad de opciones para efectos de activación y transiciones en general.

El evento Hover es uno de los mas usados para el Call to Action en una pagina web, es por esto que te compartiremos algunos sencillos pero interesantes efectos Hover para botones.

Comenzado

Para comenzar debemos de tener lo básico, vamos a empezar con algo de HTML muy simple para usar los efectos:

[html]<button>Hover Me</button>[/html]

También se hará uso de un conjunto básico de estilos CSS para todas las transiciones y animaciones. La única propiedad importante es la que manejara la transición, aquí establecemos el tiempo que toma la animación para completarse, o el tiempo en el que veremos ejecutar la animación.

[css]

button {
border: none;
background: #3a7999;
color: #f2f2f2;
padding: 10px;
font-size: 18px;
border-radius: 5px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}

[/css]

Ahora, a la parte divertida ;) …

1. Efecto Hover Horizontal

Con este efecto puedes crear la ilusión de que el botón se esta llenado desde algún lado del elemento hasta completar el contenido del botón, lo que veras es lo siguiente:

Para lograr lo anterior, es necesario hacer uso del seudo elemento before:

[css]

button:before {
content:»;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 42px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

[/css]

Este contenido está posicionado absolutamente y se coloca en la parte superior izquierda del botón. Para animarlo, simplemente establecemos el ancho:

[css]

button:hover:before {
width: 100%;
}

[/css]

2. Efecto Hover Vertical

Este efecto es muy similar al anterior, excepto que en este caso vamos a estar animando de forma vertical, para que el color parezca que está cayendo desde la parte superior del botón:

[css]

button:before {
content:»;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 0px;
background: rgba(255,255,255,0.3);
border-radius: 5px;
transition: all 2s ease;
}

[/css]

Todo lo que realmente cambia aquí es ajustar la altura en lugar del ancho:

[css]

button:hover:before {
height: 42px;
}

[/css]

3. Efecto Hover Botón «Fantasma»

En este pequeño fragmento vamos a añadir una transición sencilla pero muy llamativa para el botón. El efecto botón fantasma es cuando invertimos el color en el botón y añadimos un borde:

[css]

button:hover {
background: rgba(0,0,0,0);
color: #3a7999;
box-shadow: inset 0 0 0 3px #3a7999;
}

[/css]

Al pasar que se ha establecido el fondo como transparente, de modo que recoge el elemento de fondo circundante. Luego se añade el color y un sencillo box-shadow.

4. Efecto Icono Entrante

Este efecto es excelente para algunas funciones, como la adición de un elemento a un carro, o enviar un formulario. Lo que se hará es desplazar un icono sobre un botón en el momento que un usuario pase el puntero sobre el icono.

Lo primero que se hace es agregar un poco de padding en el botón, con la finalidad de hacer espacio para el icono:

[css]

button{
padding: 10px 35px;
overflow:hidden;
}

[/css]

El siguiente paso es añadir el icono de la compra:

[css]

button:before {

content:"\f07a";
position: absolute;
top: 11px;
left: -30px;
transition: all 200ms ease;
}

[/css]

Ahora, todo lo que necesitamos hacer es animar el icono estableciendo su propiedad a la izquierda:

[css]

button:hover:before {
left: 7px;
}

[/css]

5. Efecto Hover Botón 3D

Este último efecto es un poco más complicado, ya que implica mover de un tirón el botón para revelar otro mensaje que hemos añadido en el pseudo elemento after del botón.

Vamos a empezar por establecer la transformación del estilo del botón a 3D, para que todos los hijos del elemento conserven su posición 3D:

[css]

button {
transform-style: preserve-3d;
}[/css]

Después de esto tenemos que cuidar nuestro seudo elemento after:

[css]

button:after {
top: -100%;
left: 0px;
width: 100%;
position: absolute;
background: #3a9999;
border-radius: 5px;
content: ‘Flipped’;
transform-origin: left bottom;
transform: rotateX(90deg);
}[/css]

En cuanto a las propiedades de transformación, se ha puesto la esquina izquierda de la parte inferior del elemento como el punto de origen y establecer su rotación en x de 90 grados, de modo que parece plana. Ahora todo lo que queda por hacer es crear la animación emergente del elemento:

[css]

button:hover {
transform-origin: center bottom;
transform: rotateX(-90deg) translateY(100%);
}[/css]

Como se puede ver, para activar el efecto fijo el punto de origen se transforman por el centro, y también se rota el elemento para aplicar la transformación.