Link vult met kleur

Bij hover loopt een oranje kopie van de linktekst van links naar rechts over de zwarte tekst heen; duidelijke maar rustige linkstatus.

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- 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}}

Meer uit navigatie & menu's

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →