Hold to Confirm New
A button you hold for one and a half seconds before a delete goes through; releasing early drains back. Prevents accidental deletes without an extra dialog.
Project Verbouwing Kerkstraat 14 verwijderen?
Houd 1,5 seconde ingedrukt
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.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- Hold to Confirm · Bron: Kokonut UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="hld"><p class="hld__q">Project <b>Verbouwing Kerkstraat 14</b> verwijderen?</p><button class="hld__btn" type="button"><span class="hld__fill"></span><span class="hld__txt">Houd vast om te verwijderen</span></button><p class="hld__hint" aria-live="polite">Houd 1,5 seconde ingedrukt</p></div>
</div>/* Hold to Confirm · Bron: Kokonut UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.hld{font-family:'Switzer',system-ui,sans-serif;text-align:center;width:300px;max-width:88%}
.hld__q{margin:0 0 16px;font-size:14px;color:#0a0a0a;line-height:1.4}
.hld__btn{position:relative;overflow:hidden;width:100%;height:50px;border-radius:4px;border:1.5px solid #0a0a0a;background:#fff;color:#0a0a0a;font:600 14px/1 'Switzer',system-ui,sans-serif;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.hld__btn:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.hld__fill{position:absolute;inset:0;background:#F5480F;transform-origin:left;transform:scaleX(0)}
.hld__txt{position:relative}
.hld.is-done .hld__btn{background:#0a0a0a;color:#fff;border-color:#0a0a0a}.hld.is-done .hld__fill{opacity:0}
.hld__hint{margin:10px 0 0;font:500 10px/1.4 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(10,10,10,.5)}// Hold to Confirm · Bron: Kokonut UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.hld'); if (!w) return;
var btn = w.querySelector('.hld__btn'), fill = w.querySelector('.hld__fill'), txt = w.querySelector('.hld__txt'), hint = w.querySelector('.hld__hint');
var p = 0, holding = false, raf = 0, last = 0, DUR = 1.5, busy = false;
function frame(now) {
var dt = Math.min(.05, (now - last) / 1000); last = now;
p = holding ? p + dt / DUR : p - dt / .4; p = Math.max(0, Math.min(1, p));
fill.style.transform = 'scaleX(' + p + ')';
if (p >= 1) { holding = false; busy = true; raf = 0; w.classList.add('is-done'); txt.textContent = 'Verwijderd'; hint.textContent = 'Project staat 30 dagen in de prullenbak';
setTimeout(function () { busy = false; p = 0; fill.style.transform = 'scaleX(0)'; w.classList.remove('is-done'); txt.textContent = 'Houd vast om te verwijderen'; hint.textContent = 'Houd 1,5 seconde ingedrukt'; }, 2400); return; }
raf = (holding || p > 0) ? requestAnimationFrame(frame) : 0;
}
function start() { if (busy) return; holding = true; if (!raf) { last = performance.now(); raf = requestAnimationFrame(frame); } }
function stop() { holding = false; }
btn.addEventListener('pointerdown', function (e) { btn.setPointerCapture(e.pointerId); start(); });
btn.addEventListener('pointerup', stop); btn.addEventListener('pointercancel', stop); btn.addEventListener('lostpointercapture', stop);
btn.addEventListener('contextmenu', function (e) { e.preventDefault(); });
btn.addEventListener('keydown', function (e) { if ((e.key === ' ' || e.key === 'Enter') && !e.repeat) { e.preventDefault(); start(); } });
btn.addEventListener('keyup', function (e) { if (e.key === ' ' || e.key === 'Enter') stop(); });
btn.addEventListener('blur', stop);
}
init(document.querySelector('.jouw-container'));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 →