Button Effects

How to use Button Effects features of Sky Addons for WordPress

The Sky Addons Button Effects extension adds ten hover mechanisms and an offset halo ring to Elementor’s own Button widget. It is not a replacement button — your existing buttons keep every link, icon, size, typography, border and colour control they already have, and two new sections appear alongside them. Pick an effect, pick a colour, and the button fills, sweeps, glitches or reveals its icon on hover. Everything is pure CSS, so there is no extra script to load and the editor preview matches the front end exactly. This documentation will guide you through enabling and configuring the Button Effects extension on your website.

Key Features

1. Ten hover effects — Sweep Fill, Diagonal Sweep, Split Fill, Border Draw, Shine Pass, Radial Reveal, Underline Grow, Text Swap, Glitch and Icon Reveal
2. An offset halo ring in three shapes, usable with any effect or entirely on its own
3. Works on Elementor’s core Button widget — no rebuilding your existing calls to action
4. Every effect is recolourable; nothing is baked into a preset skin
5. One Duration control governs the whole animation, whichever effect you pick
6. Pure CSS — no JavaScript, no added markup, and the stylesheet loads only on pages that use it
7. Keyboard parity — every hover state also fires on keyboard focus
8. Off by default, so updating the plugin never changes a button you already published

Activate Button Effects Module

Button Effects ships with Sky Addons and is available once the module is switched on. To verify its status:

1. Navigate to your WordPress Dashboard and locate “Sky Addons” in the left sidebar menu
2. Open the “Widgets & Extensions” screen and switch to the Extensions list
3. Find “Button Effects” in the list
4. Ensure the toggle switch is in the “On” position
5. Save your changes if you made any adjustments

Using Button Effects

1. Open the Elementor Editor and select any Button widget — an existing one is fine.
2. In the Content tab, find the “Button Effects” section (marked with the Sky Addons icon) below the Button section.
3. Switch “Enable Button Effects” on. A matching “Button Effects” section then appears in the Style tab.
4. Set Elementor’s own “Hover Animation” to None — it runs on the same element and fights the effect. A notice in the panel reminds you when both are on.

Content Controls

The Content section decides what the effect does:

1. Enable Button Effects – turns the extension on for this button.
2. Effect – the hover mechanism. Sweep Fill slides a colour across the button; Diagonal Sweep does the same on a slant; Split Fill closes in from the top and bottom halves; Border Draw traces the outline; Shine Pass sends a highlight across the face; Radial Reveal grows a circle from the middle; Underline Grow extends a line under the label; Text Swap lifts the label out and brings it back from below; Glitch offsets the text in two colours; Icon Reveal slides the button’s icon into view.
3. None (ring only) – a real choice, not a placeholder. It leaves the hover face untouched so you can use the halo ring on its own with nothing but a colour change.
4. Direction – From Left, Right, Center, Top or Bottom. Applies to Sweep Fill and Underline Grow. On Underline Grow, From Top moves the line to the top edge and From Bottom keeps it below the text.
5. Duration – the total runtime of the animation, 100 to 2000 milliseconds, default 400.

Style Controls

The Style section decides what the effect looks like, and holds the whole halo ring in one block:

1. Effect Color – the colour the effect paints in. Most effects fill the area behind the button label, so this needs to contrast with your text colour. Clearing the field falls back to the text colour itself, which suits the line effects (Border Draw, Underline Grow) and hides the fill effects.
2. Halo Ring – an outlined ring sitting outside the button edge. It is a separate layer from the effect list, so any ring combines with any effect.
3. Ring Shape – Solid is a plain outline; Notched leaves a gap at the top; Orbit sweeps a bright arc continuously around the ring.
4. Ring Visibility – On Hover reveals it on hover; Always keeps it visible; Retract on Hover shows a full ring at rest that shrinks into a notch at the top when hovered.
5. Ring Color and Ring Color (Hover) – two separate colours. Retract on Hover uses both at once: the retreating arc is drawn in the hover colour over a track in the resting colour. Set only one and the notch cannot be told apart from its track.
6. Ring Thickness – the line weight, 1 to 12 pixels, per device.
7. Ring Gap – how far the ring sits outside the button, 0 to 40 pixels, per device.

Save and Preview

1. Click “Publish” or “Update” to save your changes.
2. Preview the page and hover the button, then press Tab to reach it with the keyboard — the effect fires on focus as well.

Best Practices

1. One effect per page, used consistently. A site where every button behaves the same way reads as designed; a different effect on each button reads as a demo.
2. Check the contrast at the end of the animation. Seven of the effects paint behind the label, so a fill close to your text colour makes the words vanish at exactly the moment someone is about to click.
3. Keep the duration under about 500ms. A hover effect that outlasts the hover never finishes, and a slow button feels unresponsive.
4. Save a styled button as a global widget. These controls are per button, so building the look once and reusing it keeps a site consistent.
5. Reserve Glitch and Orbit for a single hero call to action. They draw attention because they are unusual, which stops being true the fourth time.

Troubleshooting

1. The button jumps or scales oddly on hover: Elementor’s own Hover Animation is running on the same element. Set it to None — the panel shows a notice when both are active.
2. The label disappears on hover: the Effect Color matches the text colour, so the fill is painting the text out. Pick a colour that contrasts with the button’s hover text colour.
3. Icon Reveal does nothing: the button has no icon. Set one in the Button section above and the effect has something to reveal.
4. The effects show in the editor but not on the live site: the site is serving a generated asset bundle built before the extension was enabled. Open the Sky Addons dashboard, go to Asset Manager and regenerate the files.
5. The Orbit ring sits still, or Retract on Hover does not shrink: the visitor is on an older browser that cannot animate the angle these two shapes rely on. Both fall back to a static ring rather than breaking.

Frequently Asked Questions

Do I have to replace my existing Elementor buttons?

No. Button Effects adds two sections to Elementor’s own Button widget. Select a button you already built, switch Enable Button Effects on, and it keeps every link, icon, size and colour setting it had.

Can I use the halo ring without any hover effect?

Yes — that is what the “None (ring only)” entry in the Effect list is for. Pick it, then turn on Halo Ring in the Style section. You get a ringed button with nothing else happening on the face.

Does this add JavaScript to my pages?

No. Every effect is pure CSS, and the stylesheet is only loaded on pages that actually have an effect button on them. A page with no effect buttons carries no extra weight at all.

Will keyboard users see the effect?

Yes. Every hover rule has a matching focus rule, so tabbing to a button produces the same visual state as hovering it.

Why does my sweep run the wrong way on an RTL site?

It should not — Sweep Fill and Underline Grow flip their origin automatically for right-to-left layouts. Diagonal Sweep and Shine Pass deliberately keep the same diagonal in both directions, since a mirrored diagonal would leave the button looking pre-filled at rest.

Related Documentation

• Dual Button
• Floating Effects
• Tilt Effect
• Ripples Effect

Conclusion

The Button Effects extension by Sky Addons for Elementor upgrades the buttons you already have instead of asking you to rebuild them. Pick one effect, use it everywhere, and the whole site feels considered. If you have any questions while using Button Effects, the Sky Addons support team is happy to help.