Inlogknoppen met veeg
A row of sign-in options where on hover a dark panel sweeps in from the left and the icon recolours; for a sign-in or sign-up screen.
How to use it
- Paste the HTML where the forms & inputs should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- 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}}More forms & inputs
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 →