Applausknop die optelt New

Applause button under a blog post or case: each click is one clap, holding keeps clapping, up to 30 times per visitor. The hand taps along, three short strokes spring off and above the button a plus counter adds up your claps and sinks away after a moment. Works with Enter and Space (holding too) and announces the total through a status line. Use it under blog posts, case studies or a newsletter archive as a friendlier alternative to a like.

Zo bouwden we de webshop van Bakkerij Jansen

Goed verhaal? Klap zo vaak je wilt, tot 30 keer.

312 keer applaus

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.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Applausknop die optelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7a">
  <div class="k7a__card">
    <p class="k7a__h">Zo bouwden we de webshop van Bakkerij Jansen</p>
    <p class="k7a__p">Goed verhaal? Klap zo vaak je wilt, tot 30 keer.</p>
    <div class="k7a__row">
      <span class="k7a__wrap">
        <button class="k7a__btn" type="button" aria-label="Applaudisseren"><svg class="k7a__i" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 13V5.5a1.5 1.5 0 0 1 3 0V11m0-1V4a1.5 1.5 0 0 1 3 0v7m0-.5V5.5a1.5 1.5 0 0 1 3 0V14c0 4-2.5 6.5-6 6.5-2.4 0-3.8-1-5-2.8L3.6 14a1.5 1.5 0 0 1 2.4-1.8L8 14.5" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="k7a__ray" style="--a:-40deg"></span><span class="k7a__ray" style="--a:0deg"></span><span class="k7a__ray" style="--a:40deg"></span></button>
        <span class="k7a__bub" aria-hidden="true">+1</span>
      </span>
      <p class="k7a__tot"><span class="k7a__n">312</span> keer applaus</p>
    </div>
    <p class="k7a__sr" role="status"></p>
  </div>
</div>
</div>

/* Applausknop die optelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7a{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;padding:12px}
.k7a *{box-sizing:border-box}
.k7a__card{width:100%;max-width:340px;background:#fff;border:1px solid rgba(10,10,10,.14);border-radius:8px;padding:14px}
.k7a__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.3}
.k7a__p{margin:0 0 30px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7a__row{display:flex;align-items:center;gap:12px}
.k7a__wrap{position:relative;flex:none}
.k7a__btn{position:relative;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid rgba(10,10,10,.25);border-radius:8px;background:#fff;color:#0a0a0a;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:border-color .15s,background-color .15s}
.k7a__btn:hover{border-color:#0a0a0a}
.k7a__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.k7a__btn.is-mine{border-color:#0a0a0a;background:#fff3ee;color:#b8360a}
.k7a__i{width:24px;height:24px;transform-origin:30% 90%}
.k7a__btn.is-tik .k7a__i{animation:k7a-tik .22s ease-out}
@keyframes k7a-tik{45%{transform:rotate(-14deg) scale(1.08)}}
.k7a__ray{position:absolute;left:50%;top:50%;width:2px;height:6px;margin:-3px 0 0 -1px;background:#F5480F;border-radius:1px;opacity:0;transform:rotate(var(--a)) translateY(-22px)}
.k7a__btn.is-tik .k7a__ray{animation:k7a-ray .35s ease-out}
@keyframes k7a-ray{0%{opacity:1;transform:rotate(var(--a)) translateY(-18px) scaleY(.4)}100%{opacity:0;transform:rotate(var(--a)) translateY(-28px)}}
.k7a__bub{position:absolute;left:50%;bottom:100%;min-width:34px;margin:0 0 4px -17px;padding:3px 6px;border-radius:4px;background:#0a0a0a;color:#fff;font-size:12px;font-weight:700;line-height:1.3;text-align:center;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.k7a__bub.is-on{opacity:1;transform:none}
.k7a__bub.is-bump{animation:k7a-bump .2s}
@keyframes k7a-bump{50%{transform:translateY(-3px) scale(1.08)}}
.k7a__tot{margin:0;font-size:13px;color:#4d4d4d}
.k7a__n{font-weight:700;color:#0a0a0a;font-variant-numeric:tabular-nums}
.k7a__sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.k7a__btn.is-tik .k7a__i,.k7a__btn.is-tik .k7a__ray,.k7a__bub.is-bump{animation:none}.k7a__bub{transition:none}}

// Applausknop die optelt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.k7a'); if (!w) return;
    var btn = w.querySelector('.k7a__btn'), bub = w.querySelector('.k7a__bub'), nEl = w.querySelector('.k7a__n'), sr = w.querySelector('.k7a__sr');
    var BASE = 312, MAX = 30, mine = 0, hideT = 0, srT = 0, holdT = 0, repT = 0;
    function redo(el, c) { el.classList.remove(c); void el.offsetWidth; el.classList.add(c); }
    function klap() {
      if (mine >= MAX) { bub.textContent = 'Max 30'; bub.classList.add('is-on'); redo(bub, 'is-bump'); }
      else {
        mine++; nEl.textContent = BASE + mine; bub.textContent = '+' + mine;
        btn.classList.add('is-mine'); bub.classList.add('is-on'); redo(bub, 'is-bump'); redo(btn, 'is-tik');
        btn.setAttribute('aria-label', 'Applaudisseren, jij klapte ' + mine + ' keer');
      }
      clearTimeout(hideT); hideT = setTimeout(function () { bub.classList.remove('is-on'); }, 1100);
      clearTimeout(srT); srT = setTimeout(function () { sr.textContent = 'Jij klapte ' + mine + ' keer. In totaal ' + (BASE + mine) + ' keer applaus.'; }, 700);
    }
    function stopHold() { clearTimeout(holdT); clearInterval(repT); }
    btn.addEventListener('pointerdown', function (e) {
      if (e.button) return; e.preventDefault(); klap();
      holdT = setTimeout(function () { repT = setInterval(klap, 140); }, 380);
    });
    ['pointerup', 'pointerleave', 'pointercancel'].forEach(function (t) { btn.addEventListener(t, stopHold); });
    btn.addEventListener('click', function (e) { if (e.detail === 0) klap(); });
    btn.addEventListener('keydown', function (e) { if (e.repeat && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); klap(); } });
}
init(document.querySelector('.jouw-container'));

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 →