Aan/uit-knoppengroep New

A toolbar with toggle buttons like in a text editor: bold, italic and underline switch on or off independently (aria-pressed), alignment works as one choice out of three. Tab moves into the bar, arrows, Home and End move between buttons (roving tabindex). The sample text changes instantly. For admin screens, note fields, filters with several on/off states and map views.

Ophalen kan op werkdagen tussen 9:00 en 17:00 aan de Marktstraat 12 in Gouda.

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.

<!-- Aan/uit-knoppengroep · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ktg">
<div class="ktg__box">
<div class="ktg__bar" role="toolbar" aria-label="Tekstopmaak" aria-controls="ktg-tekst">
<button class="ktg__b" type="button" aria-pressed="true" data-s="b" aria-label="Vet"><span class="ktg__lt ktg__lt--b" aria-hidden="true">B</span></button>
<button class="ktg__b" type="button" aria-pressed="false" data-s="i" aria-label="Cursief" tabindex="-1"><span class="ktg__lt ktg__lt--i" aria-hidden="true">I</span></button>
<button class="ktg__b" type="button" aria-pressed="false" data-s="u" aria-label="Onderstrepen" tabindex="-1"><span class="ktg__lt ktg__lt--u" aria-hidden="true">U</span></button>
<span class="ktg__sep" aria-hidden="true"></span>
<span class="ktg__grp" role="group" aria-label="Uitlijning">
<button class="ktg__b" type="button" aria-pressed="true" data-a="left" aria-label="Links uitlijnen" tabindex="-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M2 6.5h8M2 9.5h12M2 12.5h7"/></svg></button>
<button class="ktg__b" type="button" aria-pressed="false" data-a="center" aria-label="Centreren" tabindex="-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M4 6.5h8M2 9.5h12M4.5 12.5h7"/></svg></button>
<button class="ktg__b" type="button" aria-pressed="false" data-a="right" aria-label="Rechts uitlijnen" tabindex="-1"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2 3.5h12M6 6.5h8M2 9.5h12M7 12.5h7"/></svg></button>
</span>
</div>
<p class="ktg__txt is-b" id="ktg-tekst">Ophalen kan op werkdagen tussen 9:00 en 17:00 aan de Marktstraat 12 in Gouda.</p>
</div>
</div>
</div>

/* Aan/uit-knoppengroep · NedDev · eigen werk. */
.ktg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.ktg *,.ktg *::before,.ktg *::after{box-sizing:border-box}
.ktg__box{width:min(330px,100%);background:#fff;border:1px solid #e2dfda;border-radius:8px;overflow:hidden}
.ktg__bar{display:flex;align-items:center;gap:4px;padding:6px;border-bottom:1px solid #e8e5e0;background:#faf9f7}
.ktg__grp{display:flex;gap:4px}
.ktg__sep{width:1px;height:22px;margin:0 4px;background:#d9d5ce}
.ktg__b{appearance:none;width:38px;height:38px;margin:0;padding:0;display:grid;place-items:center;border:0;border-radius:4px;background:transparent;color:#0a0a0a;cursor:pointer;transition:background-color .14s ease,color .14s ease,transform .1s ease}
.ktg__b:hover{background:#e8e5e0}
.ktg__b[aria-pressed="true"]{background:#0a0a0a;color:#fff}
.ktg__b[aria-pressed="true"]:hover{background:#2b2926}
.ktg__b:active{transform:scale(.9)}
.ktg__b:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.ktg__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.ktg__lt{font:500 16px/1 'Switzer',sans-serif}
.ktg__lt--b{font-weight:800}
.ktg__lt--i{font-style:italic;font-family:Georgia,'Times New Roman',serif;font-size:17px}
.ktg__lt--u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.ktg__txt{margin:0;padding:14px 16px 16px;font:400 15px/1.5 'Switzer',sans-serif;text-align:left;transition:color .2s ease}
.ktg__txt.is-b{font-weight:700}
.ktg__txt.is-i{font-style:italic}
.ktg__txt.is-u{text-decoration:underline;text-decoration-color:#F5480F;text-decoration-thickness:2px;text-underline-offset:4px}
.ktg__txt.is-center{text-align:center}
.ktg__txt.is-right{text-align:right}
@media (prefers-reduced-motion:reduce){.ktg__b{transition:none}.ktg__b:active{transform:none}}

// Aan/uit-knoppengroep · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ktg');if(!w)return;
var bs=[].slice.call(w.querySelectorAll('.ktg__b')),txt=w.querySelector('.ktg__txt'),al=bs.filter(function(b){return b.hasAttribute('data-a');});
function rove(i){bs.forEach(function(b,j){b.tabIndex=j===i?0:-1;});bs[i].focus();}
bs.forEach(function(b,i){
  b.addEventListener('click',function(){bs.forEach(function(o,j){o.tabIndex=j===i?0:-1;});
    if(b.hasAttribute('data-s')){var on=b.getAttribute('aria-pressed')!=='true';b.setAttribute('aria-pressed',String(on));txt.classList.toggle('is-'+b.getAttribute('data-s'),on);}
    else{al.forEach(function(o){o.setAttribute('aria-pressed',String(o===b));});txt.classList.remove('is-center','is-right');var a=b.getAttribute('data-a');if(a!=='left')txt.classList.add('is-'+a);}});
  b.addEventListener('keydown',function(e){var n=bs.length,k=e.key,to=null;
    if(k==='ArrowRight')to=(i+1)%n;else if(k==='ArrowLeft')to=(i-1+n)%n;else if(k==='Home')to=0;else if(k==='End')to=n-1;
    if(to!==null){e.preventDefault();rove(to);}});
});
}
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 →