Rand tekent zich bij hover New
Service cards whose orange border draws clockwise on hover or keyboard focus and retracts faster on leave. Technique: conic-gradient with an animated @property angle, masked to a 2 px border (mask-composite). Without @property support, or with reduced motion, the border appears instantly. The drawn border doubles as focus indicator.
Isolatiebedrijf Veenstra · Assen · prijzen incl. btw
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.
<!-- Rand tekent zich bij hover · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rtk"><p class="rtk__k">Isolatiebedrijf Veenstra · Assen · prijzen incl. btw</p><ul class="rtk__g">
<li><a class="rtk__c" href="#"><span class="rtk__n">Dakisolatie</span><span class="rtk__d">Van binnenuit, Rc 6,3. Klaar in één dag.</span><span class="rtk__p">vanaf € 32 per m²</span><svg class="rtk__ar" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5"/></svg></a></li>
<li><a class="rtk__c" href="#"><span class="rtk__n">Spouwmuur­isolatie</span><span class="rtk__d">EPS-parels, geen breekwerk aan de gevel.</span><span class="rtk__p">vanaf € 21 per m²</span><svg class="rtk__ar" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5"/></svg></a></li>
<li><a class="rtk__c" href="#"><span class="rtk__n">Vloerisolatie</span><span class="rtk__d">Vanuit de kruipruimte, vanaf 35 cm hoogte.</span><span class="rtk__p">vanaf € 27 per m²</span><svg class="rtk__ar" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5"/></svg></a></li></ul></div>
</div>/* Rand tekent zich bij hover · NedDev · eigen werk. */
@property --rtk-a{syntax:'<angle>';inherits:true;initial-value:0deg}
.rtk{position:absolute;inset:0;box-sizing:border-box;padding:14px 16px 16px;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;gap:12px}
.rtk__k{margin:0;font:500 9.5px 'JetBrains Mono',monospace;color:#5f5e5a}
.rtk__g{list-style:none;margin:0;padding:0;flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rtk__g li{display:flex}
.rtk__c{--rtk-a:0deg;position:relative;flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 12px 12px;background:#fff;border-radius:6px;color:inherit;text-decoration:none;outline:none;box-shadow:inset 0 0 0 1px rgba(10,10,10,.12);transition:--rtk-a .3s cubic-bezier(.4,0,.2,1)}
.rtk__c::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from 0deg,#F5480F var(--rtk-a),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.rtk__c:hover,.rtk__c:focus-visible{--rtk-a:360deg;transition:--rtk-a .75s cubic-bezier(.45,0,.2,1)}
.rtk__n{font-size:14px;font-weight:650;line-height:1.2;hyphens:manual;padding-right:16px}
.rtk__d{font-size:11.5px;line-height:1.4;color:#5f5e5a}
.rtk__p{margin-top:auto;font-size:12px;font-weight:650;font-variant-numeric:tabular-nums}
.rtk__ar{position:absolute;right:10px;top:14px;width:15px;height:15px;fill:none;stroke:#0a0a0a;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s,stroke .2s}
.rtk__c:hover .rtk__ar,.rtk__c:focus-visible .rtk__ar{transform:translateX(3px);stroke:#F5480F}
@media(max-width:420px){.rtk{padding:10px 10px 12px;gap:8px}.rtk__g{gap:7px}.rtk__c{padding:10px 8px 9px;gap:4px}.rtk__n{font-size:12px}.rtk__d{font-size:10px}.rtk__p{font-size:10.5px}.rtk__ar{right:6px;top:10px;width:12px;height:12px}}
@media(prefers-reduced-motion:reduce){.rtk__c,.rtk__c:hover,.rtk__c:focus-visible{transition:none}.rtk__ar{transition:none}}// Rand tekent zich bij hover · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.rtk');if(w)w.querySelectorAll('.rtk__c').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
}
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 →