Buttons with hover effects.

<!-- Border Beam · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="borderbeam-card"><div class="borderbeam-beam"></div><div class="borderbeam-content"><h3>Border Beam</h3><p>Een gloeiende punt cirkelt langs de rand.</p></div></div>
</div>

/* Border Beam · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.borderbeam-card{position:relative;width:280px;height:150px;border-radius:16px;background:#0b0b12;border:1px solid #23232e;overflow:hidden;display:flex;align-items:center;justify-content:center}
.borderbeam-content{padding:20px;color:#e7e7ef;text-align:center;z-index:1}.borderbeam-content h3{margin:0 0 6px;font:600 18px 'Switzer',sans-serif}.borderbeam-content p{margin:0;font:13px 'Switzer',sans-serif;color:#9b9ba8}
.borderbeam-beam{position:absolute;inset:-1px;background:conic-gradient(from 0deg,transparent 0 75%,#F5480F 85%,#ff9466 92%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:16px;animation:borderbeam-spin 5s linear infinite}
@keyframes borderbeam-spin{to{transform:rotate(1turn)}}

<!-- Shimmer Button · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="shimmerbtn-wrap"><button class="shimmerbtn"><span class="shimmerbtn-spark"><span class="shimmerbtn-spark-inner"></span></span><span class="shimmerbtn-label">Shimmer Button</span><span class="shimmerbtn-hl"></span></button></div>
</div>

/* Shimmer Button · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.shimmerbtn-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a10}
.shimmerbtn{position:relative;isolation:isolate;cursor:pointer;padding:14px 28px;border:none;border-radius:999px;background:#0a0a0a;color:#fff;font:600 15px 'Switzer',sans-serif;overflow:hidden;transition:transform .2s}
.shimmerbtn:active{transform:translateY(1px)}
.shimmerbtn-spark{position:absolute;inset:0;overflow:visible;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1.5px;border-radius:999px}
.shimmerbtn-spark-inner{position:absolute;inset:0;width:100%;height:100%;background:conic-gradient(from 0deg,transparent 0 340deg,#fff 360deg);animation:shimmerbtn-spin 3s linear infinite}
.shimmerbtn-label{position:relative;z-index:1}
.shimmerbtn-hl{position:absolute;inset:0;border-radius:999px;z-index:1;pointer-events:none;box-shadow:inset 0 -8px 10px rgba(255,255,255,.12)}
@keyframes shimmerbtn-spin{to{transform:rotate(1turn)}}

<!-- Family Button · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="fam-root"><div class="fam" data-open="false"><div class="fam-panel"><button class="fam-action">&#9999;&#65039; Bewerk</button><button class="fam-action">&#128279; Deel</button><button class="fam-action">&#128465;&#65039; Verwijder</button></div><button class="fam-toggle" aria-label="Toggle">+</button></div></div>
</div>

/* Family Button · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.fam-root{position:absolute;inset:0;background:#0a0a10}
.fam{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fam-panel{display:flex;flex-direction:column;gap:8px;overflow:hidden;background:#15151d;border:1px solid #26262f;border-radius:18px;padding:0 8px;max-height:0;opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s,transform .4s cubic-bezier(.22,1,.36,1),padding .4s}
.fam[data-open="true"] .fam-panel{max-height:180px;opacity:1;transform:translateY(0) scale(1);padding:8px}
.fam-action{cursor:pointer;white-space:nowrap;border:none;background:transparent;color:#e7e7ef;font:500 14px 'Switzer',sans-serif;padding:8px 12px;border-radius:10px;text-align:left;transition:background .2s}
.fam-action:hover{background:#23232e}
.fam-toggle{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;background:#F5480F;color:#fff;font:300 30px/1 'Switzer',sans-serif;box-shadow:0 8px 24px rgba(245,72,15,.5);transition:transform .4s cubic-bezier(.22,1,.36,1)}
.fam[data-open="true"] .fam-toggle{transform:rotate(135deg)}

// Family Button · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var fam=root.querySelector('.fam');var toggle=root.querySelector('.fam-toggle');toggle.addEventListener('click',function(){fam.dataset.open=fam.dataset.open==='true'?'false':'true';});
}
init(document.querySelector('.jouw-container'));

<!-- Magnetische knop · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-mag"><a href="#" class="ei-mag__b"><span class="ei-mag__l">Plan een kennismaking</span></a></div>
</div>

/* Magnetische knop · NedDev · eigen werk. */
.ei-mag{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ei-mag__b{display:inline-flex;align-items:center;justify-content:center;padding:18px 30px;border-radius:999px;background:#0a0a0a;color:#fff;text-decoration:none;font-family:'Switzer',sans-serif;font-weight:600;font-size:15px;transition:transform .6s cubic-bezier(.2,1.6,.4,1),background .25s;will-change:transform}
.ei-mag__l{display:inline-block;transition:transform .6s cubic-bezier(.2,1.6,.4,1)}
.ei-mag.is-near .ei-mag__b{transition:transform .15s ease-out,background .25s;background:#F5480F}
.ei-mag.is-near .ei-mag__l{transition:transform .15s ease-out}

// Magnetische knop · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-mag'),b=w.querySelector('.ei-mag__b'),l=w.querySelector('.ei-mag__l');
if(!matchMedia('(prefers-reduced-motion: reduce)').matches&&matchMedia('(hover:hover)').matches){
  w.addEventListener('pointermove',function(e){var r=b.getBoundingClientRect(),cx=r.left+r.width/2,cy=r.top+r.height/2,dx=e.clientX-cx,dy=e.clientY-cy,d=Math.sqrt(dx*dx+dy*dy),R=Math.max(r.width,120);
    if(d<R){w.classList.add('is-near');b.style.transform='translate('+(dx*.35)+'px,'+(dy*.45)+'px)';l.style.transform='translate('+(dx*.15)+'px,'+(dy*.2)+'px)';}
    else{w.classList.remove('is-near');b.style.transform='';l.style.transform='';}});
  w.addEventListener('pointerleave',function(){w.classList.remove('is-near');b.style.transform='';l.style.transform='';});}
b.addEventListener('click',function(e){e.preventDefault();});
}
init(document.querySelector('.jouw-container'));

<!-- Vonken bij klik · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-csp"><canvas class="ei-csp__cv"></canvas><button class="ei-csp__b" type="button">Aanmelden</button><span class="ei-csp__k">klik waar je wilt</span></div>
</div>

/* Vonken bij klik · NedDev · eigen werk. */
.ei-csp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:crosshair;user-select:none}
.ei-csp__cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ei-csp__b{position:relative;font-family:'Switzer',sans-serif;font-weight:600;font-size:15px;padding:14px 26px;border:0;border-radius:2px;background:#0a0a0a;color:#fff;cursor:pointer;transition:transform .15s}
.ei-csp__b:active{transform:scale(.96)}
.ei-csp__k{position:absolute;bottom:14px;left:16px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,10,10,.45)}

// Vonken bij klik · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-csp'),cv=w.querySelector('.ei-csp__cv'),ctx=cv.getContext('2d'),sparks=[],running=false,used=false,dpr=Math.min(2,window.devicePixelRatio||1);
var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
function size(){cv.width=w.clientWidth*dpr;cv.height=w.clientHeight*dpr;}size();
if(window.ResizeObserver)new ResizeObserver(size).observe(w);
function burst(x,y){var n=10,a0=Math.random()*Math.PI;for(var i=0;i<n;i++){var a=a0+i/n*Math.PI*2;sparks.push({x:x,y:y,a:a,t:0,len:10+Math.random()*8,dist:26+Math.random()*16});}if(!running){running=true;requestAnimationFrame(draw);}}
function draw(){ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,cv.width,cv.height);ctx.lineCap='round';
  sparks=sparks.filter(function(s){s.t+=1/32;return s.t<1;});
  sparks.forEach(function(s){var e=1-Math.pow(1-s.t,3),r0=e*s.dist,r1=r0+s.len*(1-s.t);ctx.strokeStyle='rgba(245,72,15,'+(1-s.t)+')';ctx.lineWidth=2.4*(1-s.t)+.6;
    ctx.beginPath();ctx.moveTo(s.x+Math.cos(s.a)*r0,s.y+Math.sin(s.a)*r0);ctx.lineTo(s.x+Math.cos(s.a)*r1,s.y+Math.sin(s.a)*r1);ctx.stroke();});
  if(sparks.length)requestAnimationFrame(draw);else running=false;}
w.addEventListener('pointerdown',function(e){if(reduce)return;used=true;var r=w.getBoundingClientRect();burst(e.clientX-r.left,e.clientY-r.top);});
if(!reduce){var demo=setInterval(function(){if(used||!w.isConnected){clearInterval(demo);return;}var b=w.querySelector('.ei-csp__b');burst(b.offsetLeft+b.offsetWidth/2,b.offsetTop+b.offsetHeight/2);},1600);setTimeout(function(){if(!used){var b=w.querySelector('.ei-csp__b');burst(b.offsetLeft+b.offsetWidth/2,b.offsetTop+b.offsetHeight/2);}},300);}
}
init(document.querySelector('.jouw-container'));

<!-- Vloeibare vulknop · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-lqb"><a href="#" class="ei-lqb__b"><span class="ei-lqb__f" aria-hidden="true"></span><span class="ei-lqb__l">Vraag een offerte aan</span></a></div>
</div>

/* Vloeibare vulknop · NedDev · eigen werk. */
.ei-lqb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ei-lqb__b{position:relative;display:inline-flex;align-items:center;padding:17px 30px;border:1.5px solid #0a0a0a;border-radius:999px;color:#0a0a0a;text-decoration:none;font-family:'Switzer',sans-serif;font-weight:600;font-size:15px;overflow:hidden;isolation:isolate;transition:color .3s .05s,border-color .3s}
.ei-lqb__f{position:absolute;left:var(--x,50%);top:var(--y,100%);width:var(--s,340px);height:var(--s,340px);margin:calc(var(--s,340px)/-2) 0 0 calc(var(--s,340px)/-2);background:#F5480F;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;transform:scale(0);transition:transform .6s cubic-bezier(.3,.7,.2,1);z-index:-1;animation:ei-lqb-wob 3.2s linear infinite}
.ei-lqb__b:hover,.ei-lqb__b:focus-visible{color:#fff;border-color:#F5480F}
.ei-lqb__b:hover .ei-lqb__f,.ei-lqb__b:focus-visible .ei-lqb__f{transform:scale(1)}
@keyframes ei-lqb-wob{0%{border-radius:42% 58% 63% 37%/45% 41% 59% 55%;rotate:0deg}50%{border-radius:58% 42% 38% 62%/57% 61% 39% 43%;rotate:180deg}100%{border-radius:42% 58% 63% 37%/45% 41% 59% 55%;rotate:360deg}}
@media(prefers-reduced-motion:reduce){.ei-lqb__f{animation:none;transition:none;border-radius:50%}}

// Vloeibare vulknop · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var b=root.querySelector('.ei-lqb__b');function at(e){var r=b.getBoundingClientRect();b.style.setProperty('--x',(e.clientX-r.left)+'px');b.style.setProperty('--y',(e.clientY-r.top)+'px');b.style.setProperty('--s',Math.ceil(Math.hypot(r.width,r.height)*2.5)+'px');}
b.addEventListener('pointerenter',at);b.addEventListener('pointerleave',at);b.addEventListener('click',function(e){e.preventDefault();});
}
init(document.querySelector('.jouw-container'));

<!-- Neon Glow Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="ngb-wrap"><button class="ngb"><span class="ngb__txt">Activeer</span></button></div>
</div>

/* Neon Glow Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.ngb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.ngb{position:relative;width:200px;height:62px;border:0;border-radius:14px;cursor:pointer;background:#141414;color:#fff;font:700 18px/1 'Switzer',sans-serif;letter-spacing:.04em;overflow:hidden;transition:box-shadow .35s,transform .2s}
.ngb::before{content:"";position:absolute;inset:0;border-radius:14px;padding:2px;background:linear-gradient(120deg,#F5480F,#ff8a3d,#F5480F);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .35s}
.ngb::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
.ngb:hover{transform:translateY(-2px);box-shadow:0 0 22px rgba(245,72,15,.65),0 0 46px rgba(245,72,15,.35)}
.ngb:hover::before{opacity:1}.ngb:hover::after{left:120%}.ngb:active{transform:translateY(0) scale(.97)}.ngb__txt{position:relative;z-index:1}

<!-- Copy Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="cpb-wrap"><button class="cpb" type="button"><svg class="cpb__copy" viewBox="0 0 24 24"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg><svg class="cpb__check" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg><span class="cpb__txt">Kopieer code</span></button></div>
</div>

/* Copy Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.cpb-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.cpb{position:relative;width:206px;height:58px;border:2px solid #0a0a0a;border-radius:13px;background:#fff;color:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;font:600 16px/1 'Switzer',sans-serif;transition:background .3s,color .3s,border-color .3s}
.cpb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .25s,transform .25s}
.cpb__check{position:absolute;left:24px;opacity:0;transform:scale(.5)}.cpb__check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s}
.cpb.is-done{background:#F5480F;border-color:#F5480F;color:#fff}.cpb.is-done .cpb__copy{opacity:0;transform:scale(.5)}.cpb.is-done .cpb__check{opacity:1;transform:scale(1)}.cpb.is-done .cpb__check path{stroke-dashoffset:0}

// Copy Button · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var b=root.querySelector('.cpb');var t=b.querySelector('.cpb__txt');var busy=false;
b.addEventListener('click',function(){if(busy)return;busy=true;try{navigator.clipboard&&navigator.clipboard.writeText('npm i neddev-ui');}catch(e){}b.classList.add('is-done');t.textContent='Gekopieerd';setTimeout(function(){b.classList.remove('is-done');t.textContent='Kopieer code';busy=false;},1600);});
}
init(document.querySelector('.jouw-container'));

<!-- Success Button · NedDev · eigen werk. -->
<div class="jouw-container">
<button class="sck-btn"><span class="sck-label">Opslaan</span><span class="sck-spin"></span><svg class="sck-check" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></button>
</div>

/* Success Button · NedDev · eigen werk. */
.sck-btn{position:relative;min-width:160px;height:50px;padding:0 26px;border:none;border-radius:12px;background:#0a0a0a;color:#fff;font-size:15px;font-weight:600;font-family:'Switzer',sans-serif;cursor:pointer;overflow:hidden;transition:background .3s,min-width .3s}
.sck-btn.sck-loading{min-width:50px;padding:0;width:50px;border-radius:50%}
.sck-btn.sck-done{background:#1f9d55;min-width:50px;padding:0;width:50px;border-radius:50%}
.sck-label{transition:opacity .2s}.sck-btn.sck-loading .sck-label,.sck-btn.sck-done .sck-label{opacity:0}
.sck-spin{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;opacity:0;animation:sck-rot .7s linear infinite}
.sck-btn.sck-loading .sck-spin{opacity:1}
@keyframes sck-rot{to{transform:rotate(360deg)}}
.sck-check{position:absolute;top:50%;left:50%;margin:-11px 0 0 -11px;opacity:0;stroke-dasharray:30;stroke-dashoffset:30}
.sck-btn.sck-done .sck-check{opacity:1;animation:sck-draw .4s ease forwards}
@keyframes sck-draw{to{stroke-dashoffset:0}}

// Success Button · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.sck-btn')||root;root.addEventListener('click',function(){if(root.classList.contains('sck-loading')||root.classList.contains('sck-done'))return;root.classList.add('sck-loading');setTimeout(function(){root.classList.remove('sck-loading');root.classList.add('sck-done');setTimeout(function(){root.classList.remove('sck-done');},1600);},1300);});
}
init(document.querySelector('.jouw-container'));

<!-- Like Heart Burst · NedDev · eigen werk. -->
<div class="jouw-container">
<button class="lhb-btn" aria-pressed="false"><svg class="lhb-heart" viewBox="0 0 24 24" width="26" height="26"><path d="M12 21s-7-4.5-9.5-8.5C.8 9.6 2.3 6 5.5 6 7.4 6 9 7.2 12 10c3-2.8 4.6-4 6.5-4 3.2 0 4.7 3.6 3 6.5C19 16.5 12 21 12 21z"/></svg><span class="lhb-count">128</span></button>
</div>

/* Like Heart Burst · NedDev · eigen werk. */
.lhb-btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:11px 18px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:30px;cursor:pointer;font-family:'Switzer',sans-serif;font-size:15px;font-weight:600;color:#0a0a0a}
.lhb-heart{fill:rgba(10,10,10,.18);transition:transform .25s,fill .25s}
.lhb-btn.lhb-on .lhb-heart{fill:#F5480F;animation:lhb-beat .4s ease}
@keyframes lhb-beat{0%{transform:scale(1)}30%{transform:scale(.7)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
.lhb-spark{position:absolute;left:24px;top:50%;width:6px;height:6px;border-radius:50%;background:#F5480F;pointer-events:none;opacity:0}
.lhb-spark.go{animation:lhb-fly .55s ease-out forwards}
@keyframes lhb-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

// Like Heart Burst · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.lhb-btn')||root;var cnt=root.querySelector('.lhb-count'),base=128;root.addEventListener('click',function(){var on=root.classList.toggle('lhb-on');root.setAttribute('aria-pressed',on);cnt.textContent=base+(on?1:0);if(on){for(var i=0;i<8;i++){(function(a){var s=document.createElement('span');s.className='lhb-spark';var ang=a/8*6.28,dist=26+Math.random()*16;s.style.setProperty('--dx',Math.cos(ang)*dist+'px');s.style.setProperty('--dy',Math.sin(ang)*dist+'px');root.appendChild(s);requestAnimationFrame(function(){s.classList.add('go');});setTimeout(function(){s.remove();},600);})(i);}}});
}
init(document.querySelector('.jouw-container'));

<!-- Marquee Hover Button · NedDev · eigen werk. -->
<div class="jouw-container">
<button class="mhb-btn"><span class="mhb-label">Bekijk werk</span><span class="mhb-track" aria-hidden="true"><span class="mhb-set">Bekijk werk &bull; Bekijk werk &bull; Bekijk werk &bull; </span><span class="mhb-set">Bekijk werk &bull; Bekijk werk &bull; Bekijk werk &bull; </span></span></button>
</div>

/* Marquee Hover Button · NedDev · eigen werk. */
.mhb-btn{position:relative;overflow:hidden;border:1px solid #0a0a0a;background:#0a0a0a;color:#fff;border-radius:999px;padding:16px 34px;font-family:'Switzer',system-ui,sans-serif;font-size:15px;font-weight:600;cursor:pointer}
.mhb-label{position:relative;z-index:2;transition:opacity .25s,transform .25s}
.mhb-track{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;color:#0a0a0a;background:#F5480F;opacity:0;transform:translateY(100%);transition:opacity .25s,transform .25s;font-weight:700}
.mhb-set{padding-left:.3em;animation:mhb-scroll 6s linear infinite;animation-play-state:paused}
.mhb-btn:hover .mhb-label{opacity:0;transform:translateY(-100%)}.mhb-btn:hover .mhb-track{opacity:1;transform:translateY(0)}.mhb-btn:hover .mhb-set{animation-play-state:running}
@keyframes mhb-scroll{to{transform:translateX(-100%)}}

<!-- Verzendknop met voortgang · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="spb"><form class="spb__f" novalidate><label class="spb__lb"><span>E-mailadres</span><input class="spb__in" type="email" value="j.devries@voorbeeld.nl" autocomplete="email"></label>
<button class="spb__btn" type="submit"><span class="spb__fill" aria-hidden="true"></span><span class="spb__lbl"><span class="spb__s">Offerte aanvragen <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.8"/></svg></span><span class="spb__s">Versturen <span><b class="spb__pct">0</b>%</span></span><span class="spb__s"><svg class="spb__ck" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 8.5l3.2 3L13 4.5" fill="none" stroke="currentColor" stroke-width="2" pathLength="1"/></svg>Verstuurd</span></span></button>
<p class="spb__note" aria-live="polite"></p></form></div>
</div>

/* Verzendknop met voortgang · NedDev · eigen werk. */
.spb{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;display:grid;place-items:center;padding:14px}
.spb__f{width:min(300px,100%);background:#fff;border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 0 rgba(10,10,10,.06)}
.spb__lb{display:flex;flex-direction:column;gap:5px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6762}
.spb__in{font:500 13px 'Switzer',sans-serif;color:#0a0a0a;border:1px solid #dcd8d2;border-radius:4px;padding:9px 10px;outline:none;transition:border-color .2s;text-transform:none;letter-spacing:0}
.spb__in:focus{border-color:#0a0a0a}
.spb__btn{appearance:none;position:relative;height:42px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13px 'Switzer',sans-serif;cursor:pointer;overflow:hidden;transition:background .35s,transform .15s}
.spb__btn:active{transform:scale(.98)}.spb__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.spb__btn:disabled{cursor:progress}
.spb__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#F5480F}
.spb__lbl{position:relative;display:block;height:42px;overflow:hidden}
.spb__s{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.spb[data-s="1"] .spb__s{transform:translateY(-100%)}.spb[data-s="2"] .spb__s{transform:translateY(-200%)}
.spb__pct{font:700 13px 'JetBrains Mono',monospace;min-width:2.2ch;text-align:right;font-variant-numeric:tabular-nums}
.spb[data-s="2"] .spb__btn{background:#F5480F}.spb[data-s="2"] .spb__fill{opacity:0}
.spb__ck path{stroke-dasharray:1;stroke-dashoffset:1}
.spb[data-s="2"] .spb__ck path{stroke-dashoffset:0;transition:stroke-dashoffset .4s .3s}
.spb__note{margin:0;min-height:1.4em;font-size:11.5px;color:#57534e;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.spb[data-s="2"] .spb__note{opacity:1;transform:none;transition-delay:.35s}
@media (prefers-reduced-motion:reduce){.spb__s,.spb__note{transition:none}}

// Verzendknop met voortgang · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.spb')||root;
var f=root.querySelector('.spb__f'),btn=root.querySelector('.spb__btn'),fill=root.querySelector('.spb__fill'),pct=root.querySelector('.spb__pct'),note=root.querySelector('.spb__note');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,busy=false,touched=false,D=1800;
function curve(t){if(t<.45){var u=t/.45;return .7*(1-Math.pow(1-u,2));}if(t<.7)return .7+.06*((t-.45)/.25);var v=(t-.7)/.3;return .76+.24*v*v;}
function run(){if(busy)return;busy=true;btn.disabled=true;root.setAttribute('data-s','1');note.textContent='';var t0=performance.now();
requestAnimationFrame(function step(now){var t=Math.min(1,(now-t0)/(rm?300:D)),p=curve(t);fill.style.width=(p*100).toFixed(1)+'%';pct.textContent=Math.round(p*100);
if(t<1){requestAnimationFrame(step);return;}root.setAttribute('data-s','2');note.textContent='Verstuurd. We bellen u vandaag voor 17:00 terug.';
setTimeout(function(){root.setAttribute('data-s','0');fill.style.width='0';pct.textContent='0';btn.disabled=false;busy=false;},2800);});}
f.addEventListener('submit',function(e){e.preventDefault();touched=true;run();});
root.querySelector('.spb__in').addEventListener('focus',function(){touched=true;});
root.setAttribute('data-s','0');
if(!rm)(function loop(){setTimeout(function(){if(touched)return;run();loop();},busy?6200:700);})();
}
init(document.querySelector('.jouw-container'));

<!-- Verwijderen met ongedaan maken · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dun"><div class="dun__card"><div class="dun__hd"><span>Afspraken deze week</span><span class="dun__cnt">3</span></div><ul class="dun__ul">
<li class="dun__li"><div class="dun__in"><span class="dun__dt"><b>14</b>okt</span><span class="dun__tx"><b>Opname badkamer</b><small>09:00 · Kerklaan 12, Rijswijk</small></span><button class="dun__del" type="button" aria-label="Verwijder afspraak Opname badkamer"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></button></div></li>
<li class="dun__li"><div class="dun__in"><span class="dun__dt"><b>15</b>okt</span><span class="dun__tx"><b>Levering tegels</b><small>13:30 · Laan van Nieuw Oost-Indie 4, Den Haag</small></span><button class="dun__del" type="button" aria-label="Verwijder afspraak Levering tegels"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></button></div></li>
<li class="dun__li"><div class="dun__in"><span class="dun__dt"><b>17</b>okt</span><span class="dun__tx"><b>Oplevering keuken</b><small>10:00 · Prinsegracht 31, Delft</small></span><button class="dun__del" type="button" aria-label="Verwijder afspraak Oplevering keuken"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5" fill="none" stroke="currentColor" stroke-width="1.4"/></svg></button></div></li></ul>
<div class="dun__tw"><div class="dun__toast" role="status"><svg class="dun__ring" viewBox="0 0 20 20" width="18" height="18" aria-hidden="true"><circle cx="10" cy="10" r="8" pathLength="1"/></svg><span class="dun__tt">Afspraak verwijderd</span><button class="dun__undo" type="button">Ongedaan maken</button></div></div></div></div>
</div>

/* Verwijderen met ongedaan maken · NedDev · eigen werk. */
.dun{position:absolute;inset:0;background:#f4f3f1;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;display:grid;place-items:center;padding:12px}
.dun__card{position:relative;width:min(330px,100%);background:#fff;border-radius:6px;padding:10px 12px 6px;overflow:hidden}
.dun__hd{display:flex;justify-content:space-between;align-items:center;font:500 9.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#6b6762;padding-bottom:6px}
.dun__cnt{background:#0a0a0a;color:#fff;border-radius:999px;min-width:18px;text-align:center;padding:2px 5px;font-variant-numeric:tabular-nums}
.dun__ul{list-style:none;margin:0;padding:0}
.dun__li{display:grid;grid-template-rows:1fr;transition:grid-template-rows .38s cubic-bezier(.7,0,.2,1),opacity .3s}
.dun__li.is-gone{grid-template-rows:0fr;opacity:0}
.dun__in{min-height:0;overflow:hidden;display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;border-top:1px solid #eeebe7;padding:6px 0}
.dun__dt{display:flex;flex-direction:column;align-items:center;font:500 8.5px 'JetBrains Mono',monospace;text-transform:uppercase;color:#6b6762;line-height:1.1}
.dun__dt b{font:800 15px 'Switzer',sans-serif;color:#0a0a0a}
.dun__tx{min-width:0;display:flex;flex-direction:column}
.dun__tx b{font-size:12.5px;font-weight:700;align-self:flex-start;background:linear-gradient(#F5480F,#F5480F) 0 58%/0% 1.5px no-repeat;transition:background-size .28s ease,color .28s}
.dun__li.is-del .dun__tx b{background-size:100% 1.5px;color:#9a958f}
.dun__tx small{font-size:10.5px;color:#6b6762;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dun__del{appearance:none;width:28px;height:28px;border:0;border-radius:4px;background:none;color:#6b6762;display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.dun__del:hover{background:#fff1eb;color:#c43a0b}.dun__del:focus-visible{outline:2px solid #F5480F}
.dun__tw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.7,0,.2,1)}
.dun.is-toast .dun__tw{grid-template-rows:1fr}
.dun__toast{min-height:0;overflow:hidden;display:flex;align-items:center;gap:8px;background:#0a0a0a;color:#fff;border-radius:5px;padding:0 8px 0 10px;font-size:12px;opacity:0;transform:translateY(10px);transition:opacity .25s,transform .38s cubic-bezier(.3,1.3,.5,1),padding .38s}
.dun.is-toast .dun__toast{opacity:1;transform:none;padding:7px 8px 7px 10px;margin-top:6px}
.dun__ring{flex:none;transform:rotate(-90deg)}
.dun__ring circle{fill:none;stroke:#F5480F;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:0}
.dun.is-toast .dun__ring circle{animation:dun-cd 5s linear forwards}
@keyframes dun-cd{to{stroke-dashoffset:1}}
.dun__tt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dun__undo{appearance:none;border:0;background:none;color:#F5480F;font:700 12px 'Switzer',sans-serif;cursor:pointer;padding:4px 6px;border-radius:3px;white-space:nowrap}
.dun__undo:hover{background:rgba(245,72,15,.15)}.dun__undo:focus-visible{outline:2px solid #F5480F}
@media (prefers-reduced-motion:reduce){.dun__li,.dun__tw,.dun__toast,.dun__tx b{transition:none}}

// Verwijderen met ongedaan maken · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.dun')||root;
var lis=[].slice.call(root.querySelectorAll('.dun__li')),cnt=root.querySelector('.dun__cnt'),tt=root.querySelector('.dun__tt'),undo=root.querySelector('.dun__undo');
var pend=null,touched=false,ring=root.querySelector('.dun__ring circle');
function count(){var c=lis.filter(function(l){return!l.classList.contains('is-gone');}).length;cnt.textContent=c;return c;}
function finalize(){if(!pend)return;clearTimeout(pend.t);pend.li.hidden=true;pend=null;root.classList.remove('is-toast');
if(count()===0)setTimeout(function(){lis.forEach(function(l){l.hidden=false;l.classList.remove('is-del');void l.offsetWidth;l.classList.remove('is-gone');});count();},1200);}
function del(li){if(li.classList.contains('is-del'))return;finalize();li.classList.add('is-del');
setTimeout(function(){li.classList.add('is-gone');count();},280);
tt.textContent=li.querySelector('.dun__tx b').textContent+' verwijderd';root.classList.remove('is-toast');void ring.getBoundingClientRect();root.classList.add('is-toast');
pend={li:li,t:setTimeout(finalize,5300)};}
function restore(){if(!pend)return;var li=pend.li;clearTimeout(pend.t);pend=null;root.classList.remove('is-toast');li.classList.remove('is-gone');count();setTimeout(function(){li.classList.remove('is-del');},300);}
lis.forEach(function(li){li.querySelector('.dun__del').addEventListener('click',function(){touched=true;del(li);});});
undo.addEventListener('click',function(){touched=true;restore();});
if(!matchMedia('(prefers-reduced-motion: reduce)').matches)(function loop(){setTimeout(function(){if(touched)return;del(lis[1]);setTimeout(function(){if(!touched)restore();},2600);loop();},pend?5200:900);})();
}
init(document.querySelector('.jouw-container'));