Snippet / Theme Options > Custom CSS and Button module CSS class
Animated CTA Button Pulse
A restrained pulse hover effect for important Divi buttons that need a little more visual weight without constantly moving.
Add dfy-cta-pulse to the Divi Button module.
.et_pb_button.dfy-cta-pulse {
border-radius: 999px;
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.et_pb_button.dfy-cta-pulse:hover,
.et_pb_button.dfy-cta-pulse:focus-visible {
animation: dfy-button-pulse 900ms ease-out 1;
transform: translateY(-1px);
box-shadow: 0 14px 32px rgba(37, 99, 235, 0.28);
}
@keyframes dfy-button-pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.34);
}
100% {
box-shadow: 0 0 0 16px rgba(37, 99, 235, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.et_pb_button.dfy-cta-pulse:hover,
.et_pb_button.dfy-cta-pulse:focus-visible {
animation: none;
}
}Notes
- Avoid infinite animation for primary CTAs. Movement should reward intent, not distract from reading.
- Pair with a real conversion action, not every button on the page.