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

Inicio / Blog / Snippets / Como hacer un efecto de “pulso” en botones en Divi

Autor: Jefferson M

Publicación: 10 Ago, 2022

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.

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.

2 Comentarios

  1. Diego B

    Y como le cambiaria el color al botón cuando haga el efecto?

    Responder
    • Jefferson M

      Que tal Diego, en las opciones del botón, recuerda que cada botón puedes darle los estilos que quieras, bueno, en las opciones de color de fondo del botón podrás cambiar el color cuando esté “on hover”

      Responder

Enviar un comentario

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

Solicitud de cancelación de suscripción

Aviso importe

🚩 Debes solicitar la cancelación de tu suscripción al menos 24 horas antes de tu renovación, de otro modo, no podremos procesar a tiempo la cancelación antes de tu renovación.

Al cancelar tu suscripción, perderás el acceso a todo esto:

🚩 A más de mil contenidos especializados en el aprendizaje del diseño web
🚩 El soporte personalizado en Divi
🚩 Acceso al grupo de Discord
🚩 Acceso a la descarga de las actualizaciones de los plugins, el contenido y las descargas de nuestro sitio.
🚩 Puntos y rangos obtenidos en la plataforma

✅ Te ofrecemos la opción de pausar tu suscripción 2 o 3 meses y así no perderás el progreso obtenido en la plataforma.

Lamentamos mucho 😩 que tu experiencia en nuestra plataforma no haya sido la mejor. Para poder procesar tu solicitud y hacerla efectiva, necesitaremos que por favor nos envíes lleno este formato. Esto nos ayudará a poder seguir mejorando nuestra propuesta de valor y siendo útil para todos los usuarios.

Solicitud de cancelación

¿Por cuál o cuáles razones deseas cancelar tu suscripción?

¿Qué características mejorarías en nuestra web?

¿Cuál es tu nivel de satisfacción en relación con la calidad del soporte que ofrecemos por diferentes medios? donde 1 es insatisfecho y 5 es satisfecho

¿En esta escala que tanto recomendarías a UXDIVI a un amigo o colega? donde 1 es "no lo recomendaría" y 5 es "Lo recomendaría totalmente"

9 + 15 =


Iniciar Sesión

¿No tienes cuenta? Registrarse

Otros planes

¡Accede a más de 1330 contenidos especializados en Diseño Web con Divi por un solo precio!

Trimestral

Ahorra 6 USD 🔥

$US 18/ Mes

*Pagando US$ 54 cada 3 meses

¿A qué accedes con este plan?

Lifetime

Un solo pago 🔥

$US 499/ Lifetime

*UN SOLO PAGO DE POR VIDA

¿A qué accedes con este plan?

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord

Con este plan accedes a:

  1. ✅ Todos los cursos
  2. ✅ Todos los tutoriales prémium
  3. ✅ Todos los plugins y layouts
  4. ✅ Soporte prémium vía email
  5. ✅ Acceso a la comunidad en Discord
  6. ✅ Descuentos en Templates para Divi