HTML + CSSButtons
Outline fill button
An outlined button that fills with color from left to right when the cursor moves over it.
Settings
16px
1x
Code
<button class="uv-fill">Subscribe</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
An outline button that fills on hover is the natural choice for secondary actions: “Download the PDF” on a portfolio, “Subscribe” in a blog footer or “View menu” next to a bolder “Book a table”. At rest it stays light and discreet. The fill slides in from the left and the text turns white as it goes.
Pair it with a solid button of the same color and you get a clear primary and secondary pair without extra design work. A slightly slower speed makes the fill feel more deliberate, which suits calmer brands.