fill hover navigation button background expand navigation link hover effect button hover animation CTA emphasis effect simple color-change hovers feel flat need eye-catching nav interaction without JS want fill-from-bottom block highlight
Nav Fill Expand
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/nav-fill-expand.json Background
Customize
Quick Start
<a href="#" class="nav-fill-expand px-4 py-2">Services</a>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 721 bytes · 38 lines
- Custom Properties
-
--fill-color--fill-text--fill-speed - Classes
-
.nav-fill-expand
fill hover navigation button background expand
A background fill that rises from the bottom of the element on hover, creating a block-highlight effect that inverts the text color. Uses ::after with height transition.
Navigation items
<nav class="flex gap-1">
<a href="#" class="nav-fill-expand rounded px-4 py-2">Home</a>
<a href="#" class="nav-fill-expand rounded px-4 py-2">About</a>
<a href="#" class="nav-fill-expand rounded px-4 py-2">Contact</a>
</nav>Custom fill color
<a href="#" class="nav-fill-expand rounded px-4 py-2"
style="--fill-color: oklch(0.55 0.2 250); --fill-text: #fff">
Blue fill effect
</a>