Snippet / Theme Options > Custom CSS and Button module CSS class
Divi Button Icon Reveal
A hover pattern that keeps a Divi button calm at rest, then reveals the built-in icon when the visitor interacts.
Enable the Divi Button icon setting, then add dfy-icon-reveal to the Button module.
.et_pb_button.dfy-icon-reveal::after {
opacity: 0;
margin-left: -0.4em;
transition: opacity 160ms ease, margin-left 160ms ease;
}
.et_pb_button.dfy-icon-reveal:hover::after,
.et_pb_button.dfy-icon-reveal:focus-visible::after {
opacity: 1;
margin-left: 0.35em;
}
.et_pb_button.dfy-icon-reveal {
transition: padding-right 160ms ease;
}
.et_pb_button.dfy-icon-reveal:hover,
.et_pb_button.dfy-icon-reveal:focus-visible {
padding-right: 2em;
}Notes
- Keep the icon meaningful. A generic arrow works for next-step CTAs.
- Check text wrapping on narrow buttons after padding changes.