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

Como hacer un efecto de “pulso” en botones en Divi

En este tutorial te mostraremos cómo podemos crear un efecto de “pulso” o “pulse” a los botones de nuestra web hecha en Divi, lo que le darán un aspecto dinámico y divertido.

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.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Mira la demo:

Como hacer un efecto de “pulso” en botón de Divi:

Lo primero es insertar el módulo Botón en cualquier parte de nuestro sitio web hecho con Divi

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 {
	animation:pulse 3s infinite; /*SE PONE LA VELOCIDAD DE LA PULSACION*/
}

@-webkit-keyframes pulse{
	0%{-webkit-box-shadow:0 0 0 0 #ff6d4a}/*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 #ff6d4a;box-shadow:0 0 0 0 #ff6d4a} /*COLOR DE LA PULSACION*/
	70%{-moz-box-shadow:0 0 0 5px transparent;box-shadow:0 0 0 10px transparent}
	100%{-moz-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent}
}

¡Y listo! Así hemos podido crear un efecto pulso para nuestros botones en la web. Recuerda que si quieres que el efecto se haga cuando el usuario pase el mouse por encima, debes solo cambiar la clase principal por: boton_a_personalizar:hover

¿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.

Artículos relacionados

Comentarios

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →