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.

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://www.pizcos.net/p/contacto_24.html">Contáctame</a>
</div>

Se le pueden dar otros uso pero yo lo he hecho para el botón de contacto del footer...
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

3 comentarios:

  1. Muy buena y original la animacion, ademas con un efecto suave de desvanecimiento. Como siempre, innovando constantemente en el blog. Te sigo, Carlos, un saludo.

    ResponderEliminar