Knoplabel dat omhoog rolt New

On hover or keyboard focus the label rolls up and a copy slides in from below, as a whole line or staggered per letter. Pure CSS (transform + overflow), works in every browser; with reduced motion only the colour change remains. Use it on the main button of a page, not on every button.

Hele regel

Per letter

Uitgeschakeld

How to use it

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

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

More buttons

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 →