What is a sparkle button?
On hover, six star shapes burst from the center of the button to scattered positions around it, each with a soft glow, while the button's background turns transparent and a halo of light appears. It's playful without being noisy, and it's one of the most requested button effects for launches, gifts and premium offers.
How to add a sparkle button in Elementor
- Add a native Button widget and set its text, link and padding as usual.
- Open Advanced → Pro Effects – Buttons.
- Select Sparkle Button.
- Choose the hover colors, the star color, the glow intensity and the animation duration.
- Publish and hover it.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Hover background | Button background on hover | Transparent |
| Hover text color | Text color on hover | #fec195 |
| Hover border color | Border color on hover | #fec195 |
| Star color | Color of the stars and their glow | #fffdef |
| Glow intensity | Glow radius of the stars (0–30 px) | 10 px |
| Animation duration | Flight time of the stars (0.2–2 s) | 1 s |
| Disable on mobile | Turn it off on touch devices | Off |
Tips
- The stars fly outside the button, so avoid parent containers with
overflow: hiddenif you want to see them complete. - It looks best on dark backgrounds, where the glow stands out.
- The stars never block the click (they ignore pointer events), and it works with or without an icon.
Where to use it
- Launch, pre-sale and "claim your gift" buttons.
- Premium plan buttons on pricing pages.
- Newsletter and giveaway sign-ups.
Why it's light
All the motion is CSS; the script only injects the star markup once — about 7 KB before minification, no animation library.
Related effects
- Magnetic Button — the button is pulled toward the cursor.
- Glitch Text — RGB glitch on hover.
