Ahorra hasta 20% OFF en nuestro Planes y Cursos

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Solo durante:

Ahorra hasta 20% OFF en nuestro Planes y Cursos

Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Divi

Como hacer un efecto Hover de «pulso» a botones en Divi

En este HUB Content te mostraremos cómo podemos crear un efecto hover de «pulso» o palpitación a los botones de nuestra web hecha en Divi.

Para efecto de este tutorial usaremos el módulo Botón de Divi el cual nos permite insertar un botón independiente en cualquier área de la página con la finalidad de enlazar a una URL específica dentro de nuestra misma web o a otro sitio web.

Como hacer un efecto Hover de «pulso»:

Lo primero es insertar el módulo Botón

Como hacer un efecto Hover de "pulso" a botones en Divi

Y empezamos a darle los formatos de diseño, como color, fondo, etc.

Ahora tenemos que nombrar una clase al botón para asignar el efecto que tendrá. Para ellos vamos a las configuraciones del botón > Avanzado > Clase CSS y le ponemos un nombre, en este caso para el ejemplo «boton_a_personalizar».

Como hacer un efecto Hover de "pulso" a botones en Divi

Ahora vamos a las opciones del tema de Divi para insertar el código CSS para el efecto que usaremos.

Usamos el siguiente Snippet de CSS

Copia el código CSS de acá abajo y luego de eso, ve a las opciones del tema Divi > Generales > insertar código CSS personalizado y pega el código CSS.

.boton_a_personalizar:hover {
	animation:pulse 2s infinite; /*SE PONE LA VELOCIDAD DE LA PULSACION*/
}

@-webkit-keyframes pulse{
	0%{-webkit-box-shadow:0 0 0 0 #ff6600}/*COLOR DE LA PULSACION*/
	70%{-webkit-box-shadow:0 0 0 10px transparent}
	100%{-webkit-box-shadow:0 0 0 0 transparent}
}
@keyframes pulse{
	0%{-moz-box-shadow:0 0 0 0 #ff6600;box-shadow:0 0 0 0 #ff6600} /*COLOR DE LA PULSACION*/
	70%{-moz-box-shadow:0 0 0 10px transparent;box-shadow:0 0 0 10px transparent}
	100%{-moz-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}
}

El resultado que tendremos será el siguiente:

¡Y listo! Así hemos podido crear un efecto pulso para nuestros botones en la web.

¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo tutorial de uxdivi.

Contenido Relacionado

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡40% + 10% OFF en nuestro lanzamiento!

Apúntate y te avisaremos cuando esté publicada nuestra nueva plataforma uxdivitemplates.com. Te regalaremos un cupón ÚNICO de descuento del 10% adicional a los descuentos de lanzamiento.

¡Gracias! Te avisaremos cuando publiquemos nuestra plataforma y te enviaremos el cupón de descuento único por estar en esta lista.