Segmented Control

<div class="sg" role="radiogroup" aria-label="View"><span class="sg__p"></span><button class="sg__b" type="button" role="radio" aria-checked="true">Day</button><button class="sg__b" type="button" role="radio" aria-checked="false">Week</button><button class="sg__b" type="button" role="radio" aria-checked="false">Month</button></div>

.sg{position:relative;display:inline-flex;padding:4px;border-radius:16px;background:#f0f0f1;border:1px solid #e4e4e7;box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.sg__p{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.16),0 4px 10px rgba(0,0,0,.06);transition:transform .28s cubic-bezier(.3,1.2,.5,1),width .28s ease}
.sg__b{position:relative;z-index:1;padding:12px 26px;border:0;border-radius:12px;background:none;color:#737373;font:500 15px/1 system-ui,sans-serif;cursor:pointer;transition:color .2s ease}
.sg__b[aria-checked=true]{color:#171717}
.sg__b:focus-visible{outline:2px solid #1659f5;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sg__p{transition:none}}

const g=document.querySelector('.sg'),p=g.querySelector('.sg__p'),bs=[...g.querySelectorAll('.sg__b')];
function set(i){bs.forEach((b,k)=>b.setAttribute('aria-checked',k===i));p.style.width=bs[i].offsetWidth+'px';p.style.transform='translateX('+bs[i].offsetLeft+'px)'}
bs.forEach((b,i)=>b.addEventListener('click',()=>set(i)));requestAnimationFrame(()=>set(0));