Pre-title lorem ipsum
Heading lorem ipsum emphasis tempor
Title one, sed sodales sagittis odio semper duo sed diam vulputate. Pellentesque dignissim ex eu varius dignissim. Donec pharetra leo non ex vulputate dignissim.
Study 02 · CTA sparkle hover
CTA sparkle hover.
A quick burst of pink sparkles rises from behind the primary button on rollover.
Cursor approachesHover over Primary to try it yourself.
Developer notes
Build this movement
Copy, paste and connect
The implementation includes the HTML, CSS, JavaScript and both sparkle SVGs. Paste it into a test page, then connect the button to your intended action and existing BrightCarbon button styles.
Keep the sparkle layer behind the button and allow overflow around its container. Use the existing icon pink colour variable (#ec66c7) for the sparkles.
The copied code contains the interaction only; the demo cursor and playback controls are for reference.
Motion and behaviour
- 150ms ease-out transition to the standard pink button hover.
- 14 sparkles, staggered by 14ms, rise, rotate and fade. Each lasts 540–750ms; the burst clears in approximately 0.9 seconds.
- One burst per rollover or keyboard focus. Moving away resets the hover colour.
- Touch: keep the normal CTA action. Reduced motion: show the button state without the sparkle burst.