border draw hover clip-path animation outline hover effect on navigation links interactive card border reveal button border animation simple border hovers feel generic want border that draws itself on hover need animated outline effect without JS
Border Draw
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/border-draw.json Quick Start
<a class="border-draw p-4 inline-block" href="#">Hover me</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 751 bytes · 39 lines
- Custom Properties
-
--border-draw-color--border-draw-width--border-draw-speed - Classes
-
.border-draw
border draw hover clip-path animation outline
Border draws itself from opposite corners on hover using two pseudo-elements with clip-path: inset() transitions. Creates a refined, high-end hover effect.
Navigation link with border draw
<nav class="flex gap-6">
<a href="#" class="border-draw px-4 py-2 text-sm font-medium text-slate-700">Features</a>
<a href="#" class="border-draw px-4 py-2 text-sm font-medium text-slate-700">Pricing</a>
<a href="#" class="border-draw px-4 py-2 text-sm font-medium text-slate-700">About</a>
</nav>