Sparkle hover button
Small sparks shoot out from the center in every direction while the cursor rests on the button.
Settings
Code
<button class="uv-sparks"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i>Magic</button>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
Where to use it
Sparks around a button suggest something a bit magical is about to happen. That makes them a good match for “Generate” in an AI writing tool, “Open your gift” on a digital gift card or “Surprise me” on a recipe site. The button grows slightly and eight dots burst outwards in a circle, again and again.
The sparks fly beyond the edges, so leave some room around the button and keep it out of tight toolbars. The secondary color paints the sparks: a warm yellow or pink on a blue button reads as celebration, while the same blue looks more subtle.