Segmented Control

<!-- Segmented Control · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="sgc-wrap"><div class="sgc"><span class="sgc__pill"></span><button class="sgc__b is-active">Maand</button><button class="sgc__b">Kwartaal</button><button class="sgc__b">Jaar</button></div></div>
</div>

/* Segmented Control · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sgc-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.sgc{position:relative;width:316px;height:54px;display:flex;background:#0a0a0a0d;border-radius:14px;padding:6px}
.sgc__pill{position:absolute;top:6px;left:6px;width:calc((100% - 12px)/3);height:calc(100% - 12px);background:#fff;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.12);transition:transform .35s cubic-bezier(.4,.1,.2,1)}
.sgc__b{flex:1;border:0;background:transparent;cursor:pointer;font:600 15px/1 'Switzer',sans-serif;color:#0a0a0a99;z-index:1;transition:color .3s}.sgc__b.is-active{color:#F5480F}

// Segmented Control · Bron: Uiverse · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var btns=[].slice.call(root.querySelectorAll('.sgc__b'));var pill=root.querySelector('.sgc__pill');
btns.forEach(function(b,i){b.addEventListener('click',function(){btns.forEach(function(x){x.classList.remove('is-active');});b.classList.add('is-active');pill.style.transform='translateX('+(i*100)+'%)';});});
}
init(document.querySelector('.jouw-container'));