Vloeibare vulknop

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