Inlogknoppen met veeg
Een rij inlogopties waarbij bij hover een donker vlak van links over de knop veegt en het icoon meekleurt; voor een inlog- of registratiescherm.
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.
<!-- Inlogknoppen met veeg · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-slr"><span class="ei-slr__k">Inloggen bij Mijn Dossier</span><a href="#" class="ei-slr__b"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M10 10h7" stroke="currentColor" stroke-width="2.4"/></svg><span>Doorgaan met Google</span></a><a href="#" class="ei-slr__b"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="2" width="7" height="7" fill="currentColor"/><rect x="11" y="2" width="7" height="7" fill="currentColor"/><rect x="2" y="11" width="7" height="7" fill="currentColor"/><rect x="11" y="11" width="7" height="7" fill="currentColor"/></svg><span>Doorgaan met Microsoft</span></a><a href="#" class="ei-slr__b"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2" y="4" width="16" height="12" rx="1.5" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M2.5 5l7.5 6 7.5-6" fill="none" stroke="currentColor" stroke-width="1.8"/></svg><span>Inloggen met e-mail</span></a></div>
</div>/* Inlogknoppen met veeg · NedDev · eigen werk. */
.ei-slr{display:flex;flex-direction:column;gap:8px;width:76%;max-width:290px}
.ei-slr__k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.5);margin-bottom:2px}
.ei-slr__b{position:relative;display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid rgba(10,10,10,.18);border-radius:4px;background:#fff;color:#0a0a0a;text-decoration:none;font-family:'Switzer',sans-serif;font-weight:600;font-size:14px;overflow:hidden;isolation:isolate;transition:color .35s cubic-bezier(.6,0,.2,1),border-color .35s}
.ei-slr__b::before{content:'';position:absolute;inset:0;background:#0a0a0a;transform:translateX(-101%);transition:transform .4s cubic-bezier(.6,0,.2,1);z-index:-1}
.ei-slr__b svg{width:18px;height:18px;flex:none;color:#0a0a0a;transition:color .35s}
.ei-slr__b:hover,.ei-slr__b:focus-visible{color:#fff;border-color:#0a0a0a}
.ei-slr__b:hover::before,.ei-slr__b:focus-visible::before{transform:none}
.ei-slr__b:hover svg,.ei-slr__b:focus-visible svg{color:#F5480F}
@media(prefers-reduced-motion:reduce){.ei-slr__b::before{transition:none}}Meer uit formulieren & invoer
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 →