Volgknop met drie standen New
A button to follow or switch on an alert with three states: off ("Notify me of new homes"), on ("Alert is on" with a check) and, when you hover or focus the on state, the way out ("Turn off alert"). The width glides along with the label instead of jumping, and a status line says what happened. For saved searches at estate agents, newsletters, job alerts and follow buttons; with reduced motion everything swaps instantly.
Nieuwe woningen in Leiden, tot € 450.000
Je krijgt één mail per dag, alleen als er iets nieuws is.
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.
<!-- Volgknop met drie standen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kvs">
<div class="kvs__box">
<p class="kvs__q">Nieuwe woningen in Leiden, tot € 450.000</p>
<p class="kvs__sub">Je krijgt één mail per dag, alleen als er iets nieuws is.</p>
<button class="kvs__b" type="button"><span class="kvs__ic" aria-hidden="true"><svg class="kvs__bell" viewBox="0 0 20 20"><path d="M5 8.5a5 5 0 0 1 10 0c0 4 1.5 5.5 1.5 5.5h-13S5 12.5 5 8.5z"/><path d="M8.3 16.5a1.8 1.8 0 0 0 3.4 0"/></svg><svg class="kvs__chk" viewBox="0 0 20 20"><path d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><svg class="kvs__off" viewBox="0 0 20 20"><path d="M5 5l10 10M15 5L5 15"/></svg></span><span class="kvs__l">Meld nieuwe woningen</span></button>
<p class="kvs__st" role="status"></p>
</div>
</div>
</div>/* Volgknop met drie standen · NedDev · eigen werk. */
.kvs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.kvs *,.kvs *::before,.kvs *::after{box-sizing:border-box}
.kvs__box{width:min(320px,100%);display:flex;flex-direction:column;align-items:flex-start}
.kvs__q{margin:0;font:600 17px/1.3 'Switzer',sans-serif;letter-spacing:-.01em}
.kvs__sub{margin:4px 0 14px;font:400 13px/1.4 'Switzer',sans-serif;color:#5d5953}
.kvs__b{appearance:none;display:inline-flex;align-items:center;gap:9px;min-height:46px;margin:0;padding:0 18px 0 14px;overflow:hidden;white-space:nowrap;border:1.5px solid #0a0a0a;border-radius:4px;background:#fff;color:#0a0a0a;font:600 15px/1 'Switzer',sans-serif;cursor:pointer;transition:width .28s cubic-bezier(.4,0,.2,1),background-color .18s ease,color .18s ease,border-color .18s ease}
.kvs__b:hover{background:#faf9f7}
.kvs__b:focus-visible{outline:2px solid #F5480F;outline-offset:3px}
.kvs__ic{position:relative;flex:none;width:20px;height:20px}
.kvs__ic svg{position:absolute;inset:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .18s ease,transform .25s cubic-bezier(.3,.7,.3,1)}
.kvs__chk,.kvs__off{opacity:0;transform:scale(.6)}
.kvs__l{display:inline-block;transition:opacity .14s ease}
.kvs__l.is-swap{opacity:0}
.kvs.is-on .kvs__b{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.kvs.is-on .kvs__bell{opacity:0;transform:scale(.6)}
.kvs.is-on .kvs__chk{opacity:1;transform:none}
.kvs.is-on.is-peek .kvs__b{background:#fff;color:#b8340a;border-color:#F5480F}
.kvs.is-on.is-peek .kvs__chk{opacity:0;transform:scale(.6)}
.kvs.is-on.is-peek .kvs__off{opacity:1;transform:none}
.kvs__st{min-height:18px;margin:10px 0 0;font:400 13px/1.35 'Switzer',sans-serif;color:#5d5953}
@media (prefers-reduced-motion:reduce){.kvs__b,.kvs__ic svg,.kvs__l{transition:none}}// Volgknop met drie standen · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kvs');if(!w)return;
var b=w.querySelector('.kvs__b'),l=w.querySelector('.kvs__l'),st=w.querySelector('.kvs__st');
var rm=matchMedia('(prefers-reduced-motion: reduce)').matches,on=false,peek=false,cur=l.textContent,tid=0;
function want(){return !on?'Meld nieuwe woningen':(peek?'Melding uitzetten':'Melding staat aan');}
function render(){w.classList.toggle('is-on',on);w.classList.toggle('is-peek',peek);var t=want();if(t===cur)return;cur=t;
var from=b.getBoundingClientRect().width;clearTimeout(tid);
if(rm){l.textContent=t;return;}
l.classList.add('is-swap');l.textContent=t;b.style.width='auto';var to=b.getBoundingClientRect().width;b.style.width=from+'px';b.offsetWidth;b.style.width=to+'px';
setTimeout(function(){l.classList.remove('is-swap');},90);tid=setTimeout(function(){b.style.width='';},320);}
b.addEventListener('click',function(){on=!on;peek=false;render();
st.textContent=on?'Melding staat aan. Je krijgt een mail op j.dekker@voorbeeld.nl.':'Melding uitgezet. Je krijgt geen mails meer over deze zoekopdracht.';});
b.addEventListener('pointerenter',function(e){if(e.pointerType==='mouse'&&on){peek=true;render();}});
b.addEventListener('pointerleave',function(){if(peek){peek=false;render();}});
b.addEventListener('focus',function(){if(on&&b.matches(':focus-visible')){peek=true;render();}});
b.addEventListener('blur',function(){if(peek){peek=false;render();}});
}
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 →