lunes, 21 de octubre de 2013

Botón de llamada a la acción animado solo con CSS


He realizado un botón de call-to-action animado solo con CSS, simple pero que permite llamar la atención del visitante hacia el. La animación es permanente y se detiene al pasar el ratón sobre ella.

Contáctame
Este es el CSS (igual tenéis que ajustar algo los margenes según vuestros sitios)
.contacta a {
float:left;
font-size: 18px;
font-style: italic;
margin: 40px;
padding: 60px 30px;
border: 3px solid #e1e1e1;
background: red;
border-radius: 80px;
color: #fff;
box-shadow: 4px 4px 6px rgba(0,0,0,0.30);
filter: progid:DXImageTransform.Microsoft.Shadow(color='#e1e1e1', Direction=145, Strength=5);
animation: pulso 4s ease-out;
animation-iteration-count: infinite;
-ms-animation: pulso 4s ease-out;
-ms-animation-iteration-count: infinite;
-webkit-animation: pulso 4s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
@-webkit-keyframes pulso {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}
@keyframes pulso {
50% {opacity: 1.0;}
100% {transform: scale(1.2, 1.2); opacity: 0.0;}
0% {-ms-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-ms-transform: scale(1.2, 1.2); opacity: 0.0;}
0% {transform: scale(0.1, 0.1); opacity: 0.0;}
}
.contacta a:hover {
animation-play-state:paused;
-webkit-animation-play-state:paused;
-ms-animation-play-state:paused;
background: green;
}

El HTML es el básico de un enlace pero en un div
<div class="contacta">
<a href="http://consejosblogge.blogspot.com/">Contáctame</a>
</div>

Se le pueden dar otros uso pero yo lo he hecho para el botón de contacto del footer...

No hay comentarios:

Publicar un comentario