Botón animado con css3
La creación de botones 3D con Css3 ahora son muy usados por todos los front-end por que da un efecto original visualmente, en este Paso a Paso vamos a aprender a realizar dicho boton, con la simulación de presionado y unos sombras desenfocadas a la hora de hacer el :hover.
Con la llegada de CSS3, la creación de botones animados ya no es nada complicado.
Olvídate de tener que generar animaciones en Flash, o de diseñar los botones en Photoshop.
CSS3 nos brinda excelentes herramientas para lograr resultados más que atractivos.
Veamos el ejemplo practico:
ESTRUCTURA HTML ------------------------------------
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Formador TI</title>
</head>
<body>
<a class="boton verde">Clic Aquí</a>
</body>
</html>
CÓDIGO CSS -----------------------------------------------
body {
/* color para el fondo de la web */
background:#e4e4e4;
}
.boton{
/* estilos para la tipografia del botón*/
color: #ffffff;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
padding: 15px 25px;
margin-right: 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
/* propiedades para la animacion del boton */
transition: all 0.20s linear;
-webkit-transition: all 0.20s linear;
-moz-transition: all 0.20s linear;
position: relative;
bottom: 0;
}
.verde{
/* Estilos para el fondo del boton #bf1b04*/
background: #7fc345;
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
ANIMANDO EL BOTÓN -----------------------------------
.boton:active{
/* Posicion del boton al clickearlo */
bottom: -5px;
}
.verde:hover {
/* Sombra del boton al pasar por encima */
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.verde:active{
/* Sombra del boton al clickearlo */
box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); #000000;
background: #385e25;
}
<body>
<a class="boton verde">Clic Aquí</a>
</body>
</html>
CÓDIGO CSS -----------------------------------------------
body {
/* color para el fondo de la web */
background:#e4e4e4;
}
.boton{
/* estilos para la tipografia del botón*/
color: #ffffff;
font-family: sans-serif;
font-size: 14px;
font-weight: bold;
padding: 15px 25px;
margin-right: 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
/* propiedades para la animacion del boton */
transition: all 0.20s linear;
-webkit-transition: all 0.20s linear;
-moz-transition: all 0.20s linear;
position: relative;
bottom: 0;
}
.verde{
/* Estilos para el fondo del boton #bf1b04*/
background: #7fc345;
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
}
ANIMANDO EL BOTÓN -----------------------------------
.boton:active{
/* Posicion del boton al clickearlo */
bottom: -5px;
}
.verde:hover {
/* Sombra del boton al pasar por encima */
box-shadow: 0 5px 5px #508530, 0 9px 0 #385e25, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
}
.verde:active{
/* Sombra del boton al clickearlo */
box-shadow: 0 2px 0 #385e25, 0px 4px 4px rgba(0,0,0,0.4), inset 0px 2px 5px rgba(0,0,0,0.2); #000000;
background: #385e25;
}
Aquí puedes descargar el ejemplo y archivos base
No hay comentarios