Shine sweep button
A streak of light crosses the button diagonally on hover, while the button lifts a couple of pixels.
Settings
Code
<button class="uv-shine">Get started</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
This shine button suits the main call to action of a software landing page: “Start free trial”, “Get started” or “Create account”. The light passes once when the cursor arrives, like a reflection on a shop window, and the button lifts. If you were looking for a CSS button hover effect with a shine, this is the classic one.
It looks best on a deep, saturated color. On pastel tones the white streak almost disappears. Use it on one button per screen: when every button shines, none of them stands out and the page starts to feel like a slot machine.