3 formas de crear un css button animation

Puede resultar simple únicamente crear un diseño base con css, pero la verdad es que esto no resulta para nada atractivo ante la visita de los diversos usuarios, pues mientras más interactiva sea su página web probablemente resulte más interesante para el visitante, por ello, basándonos en esto, hemos decidido enseñarte  3 formas de crear un css button animation.

Sea cual sea tu elección estas tres alternativas le dará un toque distinto a los botones que posea tu página web, y le permitirá a tus usuarios considerar interesante cada nuevo paso que deba dar dentro de la web, por ello, sin esperar más te dejamos las variantes.

3 formas de crear un css button animation

Opción 1 – Sombra horizontal: en este efecto una vez el usuario pase su mouse sobre el botón se generar una sombra sobre él, que se moverá de forma horizontal, el código que requieres es:

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;

}

Opción 2 – añadir icono en el botón: Con esta alternativa una vez el usuario mueva su mouse sobre el botón, aparecerá el icono de su preferencia.

Paso 1 – Abriendo espacio para el icono:

button{

padding: 10px 35px;

overflow:hidden;

}

Paso 2 – dándole valores y llamando el icono

button:before {

font-family: FontAwesome;

content:”\f07a”;

position: absolute;

top: 11px;

left: -30px;

transition: all 200ms ease;

}

Paso 3 – Animando el icono:

button:hover:before {

left: 7px;

}

Opción 3 – Cambio de botón:  

Paso 1 – estableciendo posicion 3d:

button {

transform-style: preserve-3d;

}

Paso 2 – establecer el after:

button:after {

top: -100%;

left: 0px;

width: 100%;

position: absolute;

background: #3a9999;

border-radius: 5px;

content: ‘Flipped’;

transform-origin: left bottom;

transform: rotateX(90deg);

}

Paso 3 – creando la animación:

button:hover {

transform-origin: center bottom;

transform: rotateX(-90deg) translateY(100%);

}

Leave a Reply

Your email address will not be published. Required fields are marked *