Sluitknop met animatie New
A close button for notices and banners: on hover or focus the cross turns a quarter and a frame draws around it (SVG stroke-dashoffset); on click the cross shrinks and the notice collapses smoothly via grid-template-rows. Focus then moves to a logical place, Escape closes too. For closing days, cookie or service notices and temporary promotions; with reduced motion the notice disappears without animation.
Kerst: aangepaste openingstijden. Op 25 en 26 december is de werkplaats in Amersfoort dicht. Spoed met lekkage? Bel 033 123 4567.
How to use it
- Paste the HTML where the buttons 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.
<!-- Sluitknop met animatie · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ksl">
<div class="ksl__wrap">
<div class="ksl__in">
<div class="ksl__card" role="region" aria-label="Melding openingstijden">
<p class="ksl__t"><strong>Kerst: aangepaste openingstijden.</strong> Op 25 en 26 december is de werkplaats in Amersfoort dicht. Spoed met lekkage? Bel 033 123 4567.</p>
<button class="ksl__x" type="button" aria-label="Melding sluiten"><svg viewBox="0 0 40 40" aria-hidden="true"><rect class="ksl__ring" x="1.5" y="1.5" width="37" height="37" rx="4" pathLength="100"/><g class="ksl__cross"><path d="M14 14l12 12"/><path d="M26 14L14 26"/></g></svg></button>
</div>
</div>
</div>
<button class="ksl__back" type="button" hidden>Melding weer tonen</button>
</div>
</div>/* Sluitknop met animatie · NedDev · eigen werk. */
.ksl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.ksl *,.ksl *::before,.ksl *::after{box-sizing:border-box}
.ksl__wrap{width:min(360px,100%);display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1) .12s,opacity .26s ease .12s}
.ksl__wrap[hidden]{display:none}
.ksl__in{min-height:0;overflow:hidden}
.ksl__card{display:flex;align-items:flex-start;gap:12px;padding:14px 12px 14px 16px;background:#fff;border:1px solid #e2dfda;border-left:4px solid #F5480F;border-radius:4px}
.ksl__t{margin:0;flex:1;font:400 14px/1.45 'Switzer',sans-serif}
.ksl__t strong{font-weight:600}
.ksl__x{appearance:none;flex:none;width:40px;height:40px;margin:-6px -2px 0 0;padding:0;border:0;border-radius:4px;background:transparent;color:#0a0a0a;cursor:pointer}
.ksl__x svg{display:block;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ksl__ring{stroke:#F5480F;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .35s cubic-bezier(.4,0,.2,1)}
.ksl__cross{transform-box:view-box;transform-origin:20px 20px;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.ksl__x:hover .ksl__ring,.ksl__x:focus-visible .ksl__ring{stroke-dashoffset:0}
.ksl__x:hover .ksl__cross,.ksl__x:focus-visible .ksl__cross{transform:rotate(90deg)}
.ksl__x:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.ksl.is-closing .ksl__cross{transform:rotate(90deg) scale(0)}
.ksl.is-closed .ksl__wrap{grid-template-rows:0fr;opacity:0}
.ksl__back{appearance:none;margin:0;padding:10px 14px;border:1px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 14px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s ease}
.ksl__back:hover{background:#e8e5e0}
.ksl__back:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ksl__wrap,.ksl__ring,.ksl__cross{transition:none}}// Sluitknop met animatie · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ksl');if(!w)return;
var x=w.querySelector('.ksl__x'),back=w.querySelector('.ksl__back'),card=w.querySelector('.ksl__card'),wrap=w.querySelector('.ksl__wrap');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches;
function close(){if(w.classList.contains('is-closed'))return;w.classList.add('is-closing');w.classList.add('is-closed');
setTimeout(function(){wrap.hidden=true;back.hidden=false;back.focus();w.classList.remove('is-closing');},rm?0:520);}
function open(){wrap.hidden=false;back.hidden=true;wrap.offsetHeight;w.classList.remove('is-closed');x.focus();}
x.addEventListener('click',close);
card.addEventListener('keydown',function(e){if(e.key==='Escape'){e.preventDefault();close();}});
back.addEventListener('click',open);
}
init(document.querySelector('.jouw-container'));More buttons
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 →