Vulling bij hover · veeg, cirkel, sluiter Nieuw

<!-- Vulling bij hover · veeg, cirkel, sluiter · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="hvs">
<div class="hvs__btns">
<a class="hvs__b hvs__b--veeg" href="#hv-vul-set"><span>Bekijk tarieven</span></a>
<a class="hvs__b hvs__b--cirkel" href="#hv-vul-set"><span>Plan een gesprek</span></a>
<a class="hvs__b hvs__b--sluiter" href="#hv-vul-set"><span>Download brochure</span></a>
</div>
<p class="hvs__p">Wij plaatsen zonnepanelen in <a class="hvs__l hvs__l--veeg" href="#hv-vul-set">Zwolle</a>, <a class="hvs__l hvs__l--op" href="#hv-vul-set">Kampen</a> en <a class="hvs__l hvs__l--sluit" href="#hv-vul-set">Deventer</a>, meestal binnen drie weken na akkoord.</p>
</div>
</div>

/* Vulling bij hover · veeg, cirkel, sluiter · NedDev · eigen werk. */
.hvs{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px 18px;background:#fff;font-family:'Switzer',sans-serif;color:#0a0a0a;container-type:size}
.hvs *,.hvs *::before,.hvs *::after{box-sizing:border-box}
.hvs__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hvs__b{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1.5px solid #0a0a0a;border-radius:4px;overflow:hidden;isolation:isolate;color:#0a0a0a;text-decoration:none;font:600 13px/1 'Switzer',sans-serif;outline:none}
.hvs__b:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.hvs__b::before,.hvs__b::after{content:'';position:absolute;z-index:-1;background:#F5480F;pointer-events:none}
.hvs__b--veeg::before{inset:0;transform:scaleX(0);transform-origin:right center;transition:transform .32s cubic-bezier(.65,0,.35,1)}
.hvs__b--veeg:hover::before,.hvs__b--veeg:focus-visible::before{transform:scaleX(1);transform-origin:left center}
.hvs__b--veeg::after{display:none}
.hvs__b--cirkel::before{width:var(--hvs-d,240px);height:var(--hvs-d,240px);left:var(--hvs-x,50%);top:var(--hvs-y,50%);border-radius:50%;transform:translate(-50%,-50%) scale(0);transition:transform .42s cubic-bezier(.2,.7,.3,1)}
.hvs__b--cirkel:hover::before,.hvs__b--cirkel:focus-visible::before{transform:translate(-50%,-50%) scale(1)}
.hvs__b--cirkel::after{display:none}
.hvs__b--sluiter::before,.hvs__b--sluiter::after{left:0;right:0;height:51%;transform:scaleY(0);transition:transform .3s cubic-bezier(.65,0,.35,1)}
.hvs__b--sluiter::before{top:0;transform-origin:top center}
.hvs__b--sluiter::after{bottom:0;transform-origin:bottom center}
.hvs__b--sluiter:hover::before,.hvs__b--sluiter:hover::after,.hvs__b--sluiter:focus-visible::before,.hvs__b--sluiter:focus-visible::after{transform:scaleY(1)}
.hvs__p{margin:0;max-width:30em;text-align:center;font:400 15px/1.75 'Switzer',sans-serif;color:#33312d}
.hvs__l{display:inline-block;padding:2px 3px;margin:0 -1px;color:#0a0a0a;font-weight:600;text-decoration:underline;text-decoration-color:rgba(10,10,10,.35);text-underline-offset:3px;border-radius:2px;outline:none;background-repeat:no-repeat;transition:background-size .3s cubic-bezier(.65,0,.35,1),text-decoration-color .2s}
.hvs__l:hover,.hvs__l:focus-visible{text-decoration-color:transparent}
.hvs__l:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.hvs__l--veeg{background-image:linear-gradient(#F5480F,#F5480F);background-position:0 0;background-size:0 100%}
.hvs__l--veeg:hover,.hvs__l--veeg:focus-visible{background-size:100% 100%}
.hvs__l--op{background-image:linear-gradient(#F5480F,#F5480F);background-position:0 100%;background-size:100% 0}
.hvs__l--op:hover,.hvs__l--op:focus-visible{background-size:100% 100%}
.hvs__l--sluit{background-image:linear-gradient(#F5480F,#F5480F),linear-gradient(#F5480F,#F5480F);background-position:0 0,0 100%;background-size:100% 0,100% 0}
.hvs__l--sluit:hover,.hvs__l--sluit:focus-visible{background-size:100% 51%,100% 51%}
@container (max-width:380px){.hvs{gap:16px}.hvs__b{min-height:36px;padding:0 11px;font-size:12px}.hvs__p{font-size:13px;line-height:1.7}}
@container (max-height:220px){.hvs{gap:14px}}
@media (prefers-reduced-motion:reduce){.hvs__b::before,.hvs__b::after,.hvs__l{transition:none}}

// Vulling bij hover · veeg, cirkel, sluiter · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var b=root.querySelector('.hvs__b--cirkel');if(!b)return;
function set(e){var r=b.getBoundingClientRect();var x=e.clientX-r.left,y=e.clientY-r.top;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));b.style.setProperty('--hvs-x',x+'px');b.style.setProperty('--hvs-y',y+'px');b.style.setProperty('--hvs-d',Math.ceil(d)+'px');}
b.addEventListener('pointerenter',set);b.addEventListener('pointerleave',set);
b.addEventListener('focus',function(){var r=b.getBoundingClientRect();b.style.setProperty('--hvs-x','50%');b.style.setProperty('--hvs-y','50%');b.style.setProperty('--hvs-d',Math.ceil(Math.hypot(r.width,r.height))+'px');});
}
init(document.querySelector('.jouw-container'));