Border draw button
On hover, the four sides of the border are drawn one after another, like a pen going around.
Settings
Code
<button class="uv-draw"><b></b><b></b><b></b><b></b>Explore</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 border draw button has an editorial feel. It suits an architecture studio's “Explore projects”, the “See the collection” link of a fashion lookbook or the contact button of a photographer's site. The lines trace the rectangle one side at a time, so the hover feels like a small drawing rather than a flash.
The full loop takes almost a second, and people who move fast only see half of it. If that bothers you, raise the speed. It fits minimal layouts with thin rules and plenty of white space better than busy, colorful pages.