Knoplabel dat omhoog rolt Nieuw

Bij hover of toetsenbordfocus rolt het label omhoog weg en schuift een kopie van onder in, als hele regel of per letter gestaffeld. Pure CSS (transform + overflow), werkt in elke browser; bij reduced motion blijft alleen de kleurwissel over. Inzetten op de hoofdknop van een pagina, niet op elke knop.

Hele regel

Per letter

Uitgeschakeld

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.

<!-- Knoplabel dat omhoog rolt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="klr">
  <div class="klr__cell">
    <button class="klr__btn klr__btn--a" type="button"><span class="klr__win"><span class="klr__in"><span>Offerte aanvragen</span><span aria-hidden="true">Offerte aanvragen</span></span></span><span class="klr__ico" aria-hidden="true"><svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></span></button>
    <span class="klr__cap">Hele regel</span>
  </div>
  <div class="klr__cell">
    <button class="klr__btn klr__btn--b" type="button" aria-label="Bekijk projecten"><span class="klr__win" aria-hidden="true"><span class="klr__c" style="--i:0">B</span><span class="klr__c" style="--i:1">e</span><span class="klr__c" style="--i:2">k</span><span class="klr__c" style="--i:3">i</span><span class="klr__c" style="--i:4">j</span><span class="klr__c" style="--i:5">k</span><span class="klr__c" style="--i:6">&nbsp;</span><span class="klr__c" style="--i:7">p</span><span class="klr__c" style="--i:8">r</span><span class="klr__c" style="--i:9">o</span><span class="klr__c" style="--i:10">j</span><span class="klr__c" style="--i:11">e</span><span class="klr__c" style="--i:12">c</span><span class="klr__c" style="--i:13">t</span><span class="klr__c" style="--i:14">e</span><span class="klr__c" style="--i:15">n</span></span></button>
    <span class="klr__cap">Per letter</span>
  </div>
  <div class="klr__cell">
    <button class="klr__btn klr__btn--a" type="button" disabled><span class="klr__win"><span class="klr__in"><span>Volgeboekt</span><span aria-hidden="true">Volgeboekt</span></span></span></button>
    <span class="klr__cap">Uitgeschakeld</span>
  </div>
</div>
</div>

/* Knoplabel dat omhoog rolt · NedDev · eigen werk. */
.klr{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;align-content:center;gap:18px 22px;padding:16px;font-family:'Switzer',system-ui,sans-serif;background:#f4f3f1}
.klr__cell{display:flex;flex-direction:column;align-items:center;gap:8px}
.klr__cap{font:500 10px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#5f5a54}
.klr__btn{appearance:none;display:inline-flex;align-items:center;gap:10px;border-radius:999px;font:600 14px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.klr__btn--a{background:#0a0a0a;color:#fff;border:1px solid #0a0a0a;padding:7px 7px 7px 18px}
.klr__btn--a:has(> :only-child){padding:12px 18px}
.klr__btn--b{background:#fff;color:#0a0a0a;border:1px solid #0a0a0a;padding:12px 20px}
.klr__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.klr__btn:disabled{background:#d9d6d1;border-color:#d9d6d1;color:#5f5a54;cursor:not-allowed}
.klr__win{display:inline-flex;overflow:hidden;height:1.3em;line-height:1.3em}
.klr__in{display:flex;flex-direction:column;transition:transform .34s cubic-bezier(.3,.7,.2,1)}
.klr__in>span{display:block;height:1.3em;white-space:nowrap}
.klr__ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#F5480F;color:#0a0a0a;transition:transform .34s cubic-bezier(.3,.7,.2,1)}
.klr__c{display:inline-block;white-space:pre;text-shadow:0 1.3em currentColor;transition:transform .3s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i) * 14ms)}
.klr__btn--a:not(:disabled):hover .klr__in,.klr__btn--a:not(:disabled):focus-visible .klr__in{transform:translateY(-1.3em)}
.klr__btn--a:not(:disabled):hover .klr__ico,.klr__btn--a:not(:disabled):focus-visible .klr__ico{transform:rotate(-45deg)}
.klr__btn--b:hover,.klr__btn--b:focus-visible{background:#0a0a0a;color:#fff}
.klr__btn--b:hover .klr__c,.klr__btn--b:focus-visible .klr__c{transform:translateY(-1.3em)}
.klr__btn:not(:disabled):active{transform:scale(.975)}
@media (prefers-reduced-motion:reduce){.klr__in,.klr__c,.klr__ico{transition:none!important;transform:none!important}}
@media (max-width:420px){.klr{gap:14px}.klr__btn{font-size:13px}}

Meer uit knoppen

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 →