Segmented Control

<div class="seg" id="seg">
  <button class="on">Day</button><button>Week</button><button>Month</button><button>Year</button>
  <span class="seg-pill" id="pill"></span>
</div>
<div class="seg-out" id="out">Showing: <strong>Day</strong></div>

*{box-sizing:border-box}body{text-align:center}
.seg{position:relative;display:inline-flex;background:#eef0f6;border-radius:12px;padding:5px;font-family:system-ui,sans-serif}
.seg button{position:relative;z-index:1;border:0;background:0;padding:10px 22px;font-weight:600;color:#5a627a;cursor:pointer;border-radius:9px;transition:color .25s}
.seg button.on{color:#fff}
.seg-pill{position:absolute;top:5px;bottom:5px;border-radius:9px;background:linear-gradient(135deg,#ff7a18,#ff477e);transition:left .3s cubic-bezier(.5,0,.2,1),width .3s cubic-bezier(.5,0,.2,1);z-index:0;box-shadow:0 4px 12px rgba(255,71,126,.4)}
.seg-out{margin-top:16px;font-family:system-ui,sans-serif;color:#5a627a}

var seg=document.getElementById('seg'),pill=document.getElementById('pill'),out=document.getElementById('out'),btns=seg.querySelectorAll('button');
function move(b){pill.style.left=b.offsetLeft+'px';pill.style.width=b.offsetWidth+'px'}
btns.forEach(function(b){b.onclick=function(){btns.forEach(function(x){x.classList.remove('on')});b.classList.add('on');move(b);out.innerHTML='Showing: <strong>'+b.textContent+'</strong>'}});
setTimeout(function(){move(btns[0])},50);