Magnetische knop

<!-- 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'));