How to use the button hover effects generator
- Choose an effect. Hover over the effects at the top to try them, then click one. The large button shows it with your settings.
- Match your brand. Set the button colour, text colour and effect colour, plus the corner radius, size and speed. Untick Include colours if you’d rather keep the colours and size set in your page builder.
- Pick your page builder. Choose WordPress, Elementor, Divi, Bricks or Breakdance from Paste into, above the code. The CSS is rewritten to target that builder’s own button, with steps showing exactly where to paste it.
- Paste and publish. Follow the steps, save the page and hover the button on your live site. Keyboard users get the same effect when they tab to the button.
Effects page builders don’t include
Elementor, Divi and other builders let you change a button’s colours and add basic hover animations, but not effects like a light sweep, a fill that slides in, or a border that glows and rotates. Those need a little CSS: a pseudo-element, a transition or a keyframe animation. This generator writes that CSS for you, sized and coloured to match.
Why the code targets each builder differently
Every builder wraps its button in its own markup. Elementor’s Button widget puts the real button inside a wrapper with the class elementor-button; the WordPress Button block uses wp-block-button__link; Divi uses et_pb_button; Bricks’ %root% is the button itself. Choosing your builder rewrites the selectors so the effect lands on the clickable element, not the box around it.
Accessible and lightweight
Every effect also runs on :focus-visible, so people using a keyboard see it too, and all motion stops for anyone who has turned on reduced motion in their system settings. The effects only animate transform, opacity and shadows where possible, which keeps them smooth, and none of them need JavaScript.
Using it in WordPress, Elementor, Divi, Bricks and Breakdance
Choose your page builder from Paste into, above the code, and Refract rewrites the CSS for it. Elementor Pro and Divi 5 use the selector keyword, Bricks uses %root% and Breakdance uses %%SELECTOR%%, so the effect only applies to the element you paste it into. For the WordPress block editor, free Elementor and Divi 4, you add a CSS class to the element and paste the CSS into your site’s custom CSS. The numbered steps under the code show exactly where to click, and Refract remembers your builder for every tool.
Frequently asked questions
Can I use these effects in Elementor free?
Yes. Elementor’s own Custom CSS box needs Elementor Pro, so the free option asks you to add a CSS class to the Button widget and paste the CSS into Appearance › Customise › Additional CSS instead.
Why doesn’t the effect show in Divi?
Divi’s Use Custom Styles For Button option adds styles that can override the effect. Leave it off, or untick Include colours here and set only the effect.
Will this slow my site down?
No. Each effect is a few hundred bytes of CSS with no images, fonts or scripts.
Does the animated border work everywhere?
It uses @property to animate the gradient angle, which is supported in all current browsers. Older browsers show a static gradient border instead.
Can I use this in Elementor, Divi or Bricks?
Yes. Choose your page builder under Paste into, above the code. The CSS is rewritten for that builder, and the steps underneath tell you exactly where to paste it. WordPress’s block editor and Breakdance are supported too.