Vulling bij hover · veeg, cirkel, sluiter New

Three fills for buttons and text links: a sweep that enters on the left and leaves on the right, a circle that grows from where the cursor enters (from the centre on keyboard focus) and a shutter where two halves slide together from top and bottom. Only transform on a pseudo element, so it stays smooth; for secondary buttons and links in running text.

Bekijk tarieven Plan een gesprek Download brochure

Wij plaatsen zonnepanelen in Zwolle, Kampen en Deventer, meestal binnen drie weken na akkoord.

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

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

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →