Pure-CSS hover effects for Elementor's core Button — ten fills, wipes and reveals plus an offset halo ring, no JavaScript.
Straight answers about what this one does, where it fits in a real build, and what it costs you to ship.
Read the documentation for this one, or write to us — a human answers inside a business day.
It adds a Button Effects section to Elementor’s own Button widget, so a button you already built gains a hover treatment straight from the panel: ten effects and a separate halo ring. Nothing is rebuilt and no markup changes. The controls sit on the Content and Style tabs of the same widget.
Elementor’s core Button widget only. A button that belongs to another widget, such as a form’s submit or a pricing table’s link, is that widget’s own element and keeps its own hover controls, so the effects list will not appear there.
No. It ships in the free Sky Addons for Elementor plugin and hooks the free Button widget, so free Elementor is enough. The extension is enabled by default, and the section appears in the panel as soon as the plugin is active.
None at all. Every effect is CSS: one stylesheet of roughly 1.4 KB gzipped, loaded only on pages where a button actually has the effect switched on. Buttons without it cost nothing, and there is no script that can fail to start.
Sweep Fill, Diagonal Sweep, Split Fill, Border Draw, Shine Pass, Radial Reveal, Underline Grow, Text Swap, Glitch and Icon Reveal, plus a None option for running the ring on its own. Icon Reveal needs an icon set in the Button section above it, otherwise there is nothing to slide in.
An offset outline drawn just outside the button, on its own layer, so it combines with any effect. Shape can be Solid, Notched or Orbit, which sends a bright arc travelling around it. Visibility can be On Hover, Always, or Retract on Hover, where a full ring collapses into a small notch. Both colours, thickness and gap are separate controls.
Yes. Set Effect to None (ring only) and the ring runs alone. That covers the ordinary call-to-action pattern of a filled button and a ghost button, each inside a soft ring, with Elementor’s own hover background colour fading underneath.
Sweep Fill and Underline Grow both take a Direction: From Left, From Right, From Center, From Top or From Bottom. On Underline Grow, From Top moves the line to the top edge of the button rather than changing where the growth begins.
Yes. Every effect mirrors its hover rule on focus, so tabbing through a page runs the same treatment a mouse does. Visitors who ask their system for reduced motion get the end state without the movement, because the stylesheet drops transitions and animations under prefers-reduced-motion.
Elementor’s own Hover Animation runs on the same element and competes with the effect. Set Hover Animation to None and the effect takes over cleanly. The panel prints a notice when both are switched on.
The ring is drawn outside the button’s own box, so it needs room around it. Give the container enough padding, around 24px at the default gap, and check that nothing above it is clipping overflow. Ring Gap pulls the ring closer when space is tight.
Yes, every value belongs to the widget. Duration, 400ms by default, drives the effect and the ring together. Effect Color paints the fill, and the ring carries its own normal and hover colour. There are no skin presets and no custom CSS, so the same effect fits any palette.
