Button with growing arrow
The arrow next to the label slides forward on hover and its line stretches out as it moves.
Settings
Code
<button class="uv-arrow">Continue<svg viewBox="0 0 24 12"><path class="l" d="M2 6h18"/><path d="M15 1l6 5-6 5"/></svg></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
The growing arrow says “forward” without words, so it fits steps that lead somewhere: “Continue” in a multi-step checkout, “Next lesson” in an online course or “Read the case study” at the end of a portfolio project. It is a quiet arrow button with hover animation that invites the click instead of shouting for it.
Avoid it on actions that go back, cancel or delete, because the arrow promises progress. It also works nicely as the “Next article” link at the bottom of a blog post, where people are already in reading mode and a small nudge is enough.