Link vult met kleur

On hover an orange copy of the link text wipes left to right over the black text; a clear but calm link state.

How to use it

Paste the HTML where the navigation & menus should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
No JavaScript needed.

<!-- Link vult met kleur · NedDev · eigen werk. -->
<div class="jouw-container">
<ul class="ei-fil"><li><a class="ei-fil__a" href="#" data-t="Dakkapellen">Dakkapellen</a></li><li><a class="ei-fil__a" href="#" data-t="Renovatie">Renovatie</a></li><li><a class="ei-fil__a" href="#" data-t="Offerte aanvragen">Offerte aanvragen</a></li></ul>
</div>

/* Link vult met kleur · NedDev · eigen werk. */
.ei-fil{list-style:none;margin:0;padding:0 24px;display:flex;flex-direction:column;gap:6px}
.ei-fil__a{position:relative;display:inline-block;font-family:'Switzer',sans-serif;font-weight:700;font-size:clamp(22px,4vw,30px);letter-spacing:-.02em;color:#0a0a0a;text-decoration:none;white-space:nowrap}
.ei-fil__a::after{content:attr(data-t);position:absolute;left:0;top:0;color:#F5480F;clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.7,0,.2,1)}
.ei-fil__a:hover::after,.ei-fil__a:focus-visible::after{clip-path:inset(0 0 0 0)}
.ei-fil__a:focus-visible{outline:2px solid #F5480F;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.ei-fil__a::after{transition:none}}

More navigation & menus

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →