Ripple vanaf het klikpunt Nieuw

<!-- Ripple vanaf het klikpunt · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="krp">
<div class="krp__box">
<p class="krp__prod">Regenjas Noorderzon, maat M</p>
<p class="krp__price">€ 89,95</p>
<div class="krp__row">
<button class="krp__b krp__b--p" type="button">In winkelmand</button>
<button class="krp__b krp__b--s" type="button" aria-pressed="false">Bewaren</button>
</div>
</div>
</div>
</div>

/* Ripple vanaf het klikpunt · NedDev · eigen werk. */
.krp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.krp *,.krp *::before,.krp *::after{box-sizing:border-box}
.krp__box{width:min(320px,100%)}
.krp__prod{margin:0;font:500 15px/1.3 'Switzer',sans-serif}
.krp__price{margin:2px 0 14px;font:700 28px/1.1 'Switzer',sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.krp__row{display:flex;gap:10px}
.krp__b{appearance:none;position:relative;overflow:hidden;isolation:isolate;flex:1;min-height:48px;margin:0;padding:0 16px;border-radius:4px;font:600 15px/1 'Switzer',sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .16s ease}
.krp__b--p{flex:1.6;border:0;background:#F5480F;color:#0a0a0a}
.krp__b--p:hover{background:#ff5d24}
.krp__b--s{border:1px solid #0a0a0a;background:#fff;color:#0a0a0a}
.krp__b--s:hover{background:#faf9f7}
.krp__b--s[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.krp__b:focus-visible{outline:2px solid #0a0a0a;outline-offset:3px}
.krp__r{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:rgba(10,10,10,.2);transform:scale(0);opacity:1;transition:transform .5s cubic-bezier(.2,.6,.3,1),opacity .4s ease}
.krp__b--s .krp__r{background:rgba(245,72,15,.28)}
.krp__b--s[aria-pressed="true"] .krp__r{background:rgba(255,255,255,.28)}
.krp__r.is-in{transform:scale(1)}
.krp__r.is-out{opacity:0}
@media (prefers-reduced-motion:reduce){.krp__r{transform:scale(1);transition:opacity .3s ease}}

// Ripple vanaf het klikpunt · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.krp');if(!w)return;
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
function rip(b,x,y){var r=b.getBoundingClientRect();if(x==null){x=r.width/2;y=r.height/2;}
  var d=2*Math.max(Math.hypot(x,y),Math.hypot(r.width-x,y),Math.hypot(x,r.height-y),Math.hypot(r.width-x,r.height-y));
  var s=document.createElement('span');s.className='krp__r';s.setAttribute('aria-hidden','true');
  s.style.width=s.style.height=d+'px';s.style.left=(x-d/2)+'px';s.style.top=(y-d/2)+'px';b.appendChild(s);
  s.offsetWidth;s.classList.add('is-in');s._t=performance.now();return s;}
function out(s){if(!s||s._gone)return;s._gone=true;var wait=Math.max(0,(rm?60:260)-(performance.now()-s._t));
  setTimeout(function(){s.classList.add('is-out');setTimeout(function(){s.remove();},450);},wait);}
[].forEach.call(w.querySelectorAll('.krp__b'),function(b){var cur=null;
  b.addEventListener('pointerdown',function(e){if(e.button!==0)return;var r=b.getBoundingClientRect();cur=rip(b,e.clientX-r.left,e.clientY-r.top);});
  ['pointerup','pointerleave','pointercancel'].forEach(function(t){b.addEventListener(t,function(){out(cur);cur=null;});});
  b.addEventListener('keydown',function(e){if((e.key==='Enter'||e.key===' ')&&!e.repeat){out(rip(b));}});
  if(b.hasAttribute('aria-pressed'))b.addEventListener('click',function(){var on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',String(on));b.firstChild.nodeValue=on?'Bewaard':'Bewaren';});
});
}
init(document.querySelector('.jouw-container'));