Efecto ‘pulso’ en botones de Divi: tutorial con CSS

En este tutorial te voy a mostrar cómo crear un efecto de "pulso" o "pulse" en los botones de tu web hecha con Divi, ese latido que hace que el botón parezca que respira y que atrae la mirada del usuario sin que se dé cuenta. Es un detalle pequeño pero muy poderoso: le da un aspecto dinámico y divertido a tus llamadas a la acción, y lo mejor de todo es que se logra solo con CSS, sin instalar ningún plugin adicional.

Si alguna vez viste un botón en una landing page que tenía como un anillo que se expandía y se desvanecía en bucle, eso es exactamente el efecto pulso. Se usa muchísimo en botones de "Comprar ahora", "Regístrate" o "Descarga gratis", justamente porque ese movimiento sutil dispara la atención del ojo humano hacia el punto donde quieres que el usuario haga clic. Vamos a aprender a hacerlo paso a paso.

Para este tutorial vamos a usar el módulo Botón de Divi, que nos permite insertar un botón independiente en cualquier área de la página para enlazar a una URL específica, ya sea dentro de tu propia web o hacia otro sitio.

Mira la demo del efecto en acción:

¿Qué es el efecto pulso y por qué funciona tan bien?

El efecto pulso es una animación CSS que hace que alrededor del botón aparezca una sombra (box-shadow) que crece y se desvanece de forma cíclica, creando la ilusión de un latido o de una onda que se expande. Visualmente, el botón parece "respirar". No cambia de posición ni de tamaño, simplemente emite ese halo pulsante que llama la atención.

La razón por la que funciona tan bien tiene que ver con cómo está cableado nuestro cerebro. El ojo humano está programado para detectar movimiento, es un mecanismo de supervivencia heredado de cuando teníamos que notar depredadores moviéndose entre la maleza. En una página web llena de elementos estáticos, cualquier cosa que se mueva captura la atención de inmediato. Un botón que pulsa entre un montón de contenido quieto es como una mano que se levanta entre la multitud: imposible no notarla.

Esto lo convierte en una herramienta de conversión muy efectiva cuando se usa con criterio. El truco está en aplicarlo solo al botón más importante de la página, ese que representa la acción que de verdad quieres que el usuario tome. Si pones a pulsar todos los botones, el efecto pierde su poder y el sitio se vuelve un caos visual mareante.

Cómo hacer un efecto de "pulso" en botón de Divi paso a paso

Lo primero es insertar el módulo Botón en cualquier parte de tu sitio web hecho con Divi. Lo agregas como cualquier otro módulo, desde el botón verde de "+" dentro de una fila.

Una vez insertado, empezamos a darle los formatos de diseño que queramos: color de fondo, color del texto, bordes, tamaño, todo lo que necesites para que combine con la estética de tu sitio. Diséñalo a tu gusto antes de pasar al siguiente paso.

Ahora viene el paso clave: tenemos que asignarle una clase CSS al botón para poder aplicarle el efecto específicamente a él. Para esto vamos a las configuraciones del botón > pestaña Avanzado > campo Clase CSS, y le ponemos un nombre. Para este ejemplo voy a usar: boton_a_personalizar.

Esta clase CSS es la que va a conectar nuestro botón con el código de la animación. Es como ponerle una etiqueta con nombre: el CSS va a buscar todos los elementos que tengan la clase boton_a_personalizar y les va a aplicar el efecto pulso, dejando intactos todos los demás botones del sitio.

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

Usamos el siguiente Snippet de CSS

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

.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í de simple hemos creado un efecto pulso para nuestros botones en la web. Recuerda que si quieres que el efecto se active solo cuando el usuario pase el mouse por encima (en lugar de pulsar todo el tiempo), solo debes cambiar la clase principal por: boton_a_personalizar:hover.

Entendiendo el código CSS: qué hace cada parte

Quiero que no solo copies y pegues, sino que entiendas qué está pasando, porque así vas a poder adaptarlo a tus necesidades en lugar de quedarte con un resultado genérico. El código tiene dos partes principales y son muy lógicas una vez que las ves de cerca.

La primera línea, animation:pulse 3s infinite;, es la que le dice al botón "ejecuta la animación llamada pulse, que cada ciclo dure 3 segundos, y repítela de forma infinita". Ese número de segundos es la velocidad del latido. Si lo bajas a 1.5s, el botón pulsará más rápido y se sentirá más urgente; si lo subes a 4s, el efecto será más lento y relajado. Ajústalo según el tono que quieras transmitir.

La segunda parte son los @keyframes, que definen cómo se ve la animación en cada momento del ciclo. El 0% es el inicio (la sombra empieza pegada al botón, sin expandirse), el 70% es el punto donde la sombra ya creció hasta su máximo y empieza a volverse transparente, y el 100% cierra el ciclo dejando la sombra completamente desvanecida, lista para volver a empezar. Esa progresión de opaco a transparente es lo que crea la ilusión de la onda que se expande y se disuelve.

Consejo: El valor 10px que aparece en el 70% controla qué tan grande se hace el anillo de la pulsación. Si quieres un latido más sutil y elegante, bájalo a 5px. Si quieres uno más llamativo y agresivo, súbelo a 15px o 20px. Prueba distintos valores hasta que encuentres el punto justo para tu diseño.

¿Cómo cambio el color del pulso?

El color de la pulsación está definido por el valor #ff6d4a, que en este ejemplo es un naranja. Lo vas a encontrar comentado en el código justo con la nota COLOR DE LA PULSACION, para que sea fácil de ubicar. Para cambiarlo, simplemente reemplaza ese código hexadecimal por el de tu color de marca en los tres lugares donde aparece (en la versión webkit y en la versión estándar).

Mi recomendación es que uses un color que contraste con el fondo donde está el botón, para que el pulso se note bien. Si tu botón está sobre un fondo claro, un color saturado funciona perfecto. Lo ideal es que el color del pulso sea el mismo o muy parecido al del propio botón, para que se sienta como una extensión natural de él y no como un elemento ajeno pegado encima.

Cuándo usar y cuándo NO usar el efecto pulso

Como todo efecto llamativo, el pulso es un arma de doble filo. Bien usado, dispara tus conversiones. Mal usado, vuelve tu sitio molesto y poco profesional. Acá te dejo mi criterio para decidir cuándo aplicarlo.

Úsalo en el botón principal de conversión de una landing page: el "Comprar", el "Reservar", el "Empezar prueba gratis". También funciona genial en botones flotantes de WhatsApp o contacto, donde quieres que el usuario sepa que ahí tiene una vía rápida de comunicación. Y es muy efectivo en ofertas por tiempo limitado, donde ese latido refuerza la sensación de urgencia.

Ahora, cuándo NO usarlo: nunca lo apliques a varios botones en la misma vista. Si tienes tres botones pulsando al mismo tiempo, ninguno destaca y todos compiten entre sí, generando ansiedad visual. Tampoco lo uses en sitios donde la sobriedad es parte de la marca (un bufete de abogados, una clínica, una institución financiera), porque ahí ese movimiento puede leerse como poco serio. Y evítalo en botones secundarios o de navegación, donde solo distrae.

Consejo: Una técnica que me gusta mucho es activar el pulso solo en :hover para los botones secundarios, y dejarlo permanente solo en el botón principal. Así el botón estrella late siempre llamando la atención, y los demás reaccionan con un pulso sutil únicamente cuando el usuario los toca con el mouse. Es lo mejor de ambos mundos.

Preguntas frecuentes

¿El efecto pulso funciona en móviles?

Sí, el efecto pulso permanente (sin :hover) funciona perfecto en móviles, porque es una animación que corre sola sin necesidad de cursor. De hecho, es ideal para móvil, donde no existe el estado hover. Distinto es si configuras el efecto solo en :hover: en pantallas táctiles no hay puntero, así que ese efecto no se activaría con el toque del dedo de forma fiable. Para móvil, deja el pulso siempre activo.

¿El efecto afecta la velocidad de carga de mi sitio?

Prácticamente nada. Las animaciones CSS son muy ligeras y se procesan directamente en el navegador, sin cargar archivos JavaScript pesados ni hacer peticiones al servidor. El efecto pulso usa box-shadow, que es de las propiedades más eficientes para animar. No vas a notar ningún impacto en el rendimiento ni en tus métricas de velocidad por agregar este efecto.

¿Puedo aplicar el pulso a otros elementos que no sean botones?

Por supuesto. El truco está en la clase CSS. Cualquier módulo de Divi al que le asignes la clase boton_a_personalizar (o el nombre que tú elijas) en su pestaña Avanzado va a recibir el efecto. Puedes aplicarlo a un ícono, a una imagen, a una caja con borde, a un módulo de número. La animación no distingue qué tipo de elemento es, solo busca la clase. Eso te da libertad total para experimentar con dónde aplicar el latido.

¿Puedo tener varios botones con pulsos de colores distintos?

Sí. Solo tienes que crear clases CSS diferentes para cada botón (por ejemplo boton_pulso_naranja y boton_pulso_azul) y duplicar el bloque de código cambiando el nombre de la clase, el nombre de la animación en los @keyframes y el color hexadecimal en cada versión. Aunque, como te decía antes, mi consejo es no abusar: tener muchos botones pulsando a la vez resta en lugar de sumar. Reserva el efecto para lo que de verdad importa.

Conclusión

¡Y listo! Así de fácil hemos creado un efecto pulso para los botones de nuestra web hecha con Divi, usando solo unas líneas de CSS y sin instalar ningún plugin. Es un recurso pequeño pero con un gran impacto en la atención del usuario, perfecto para resaltar tus llamadas a la acción más importantes y empujar suavemente al visitante hacia el clic que quieres que dé.

Lo mejor de aprender estas técnicas con CSS es que te dan un control total sobre el diseño, sin depender de plugins que ralentizan el sitio. Con un poco de práctica vas a poder ajustar la velocidad, el tamaño y el color del efecto para que encaje perfecto con cada proyecto. Y, sobre todo, recuerda usarlo con criterio: el secreto del efecto pulso está en aplicarlo donde de verdad suma.

Si quieres aprender muchas más técnicas como esta y dominar Divi a nivel profesional, desde los efectos CSS hasta el diseño completo de sitios que convierten, te invito a conocer la membresía premium y los cursos en uxdivi.com/planes. Ahí encontrarás todo el camino formativo para convertirte en un experto del constructor.

¿Te gustó este tutorial? Si te resultó útil, compártelo con tus amigos y conocidos. Y recuerda que puedes dejarme el enlace de tu creación en los comentarios para que todos veamos los resultados maravillosos que conseguiste con este post. Nos vemos en el próximo tutorial de uxdivi.