Rotating gradient border
A two-color gradient runs around the button's border non-stop, even when nobody is hovering it.
Settings
Code
<button class="uv-conic"><span>Discover</span></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
A button with an animated gradient border draws the eye without anyone touching it, which makes it a good fit for launch moments: “Join the waitlist” on a pre-launch page, “Get tickets” for a conference or “Try the beta” in a changelog. The inside stays the color of your page, so only the outline moves.
Because it never stops, keep it to one element and slow it down if it sits near text people need to read. Pick two colors that are close in hue for something calm, or opposite ones if the page is dark and you want more punch.