Animated Toggle Group — Free HTML CSS JS Segmented Control

<div class="tgg-group" id="tggGroup" role="tablist" aria-label="View">
  <span class="tgg-pill" id="tggPill"></span>
  <button type="button" class="tgg-opt is-active" role="tab" aria-selected="true">Day</button>
  <button type="button" class="tgg-opt" role="tab" aria-selected="false">Week</button>
  <button type="button" class="tgg-opt" role="tab" aria-selected="false">Month</button>
  <button type="button" class="tgg-opt" role="tab" aria-selected="false">Year</button>
</div>
<p class="tgg-out" id="tggOut">Showing: <strong>Day</strong></p>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0c0f1a;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;gap:18px;padding:24px}

.tgg-group{position:relative;display:inline-flex;background:#161b29;border:1px solid #28304300;border-radius:12px;padding:5px;gap:2px;box-shadow:inset 0 0 0 1px #232b3d}
.tgg-pill{position:absolute;top:5px;left:5px;height:calc(100% - 10px);border-radius:9px;background:linear-gradient(120deg,#6366f1,#8b5cf6);box-shadow:0 6px 18px rgba(99,102,241,.4);transition:transform .32s cubic-bezier(.34,1.4,.5,1),width .32s cubic-bezier(.34,1.4,.5,1);z-index:0}
.tgg-opt{position:relative;z-index:1;background:none;border:0;font-family:inherit;font-size:14px;font-weight:600;color:#9aa1b8;padding:9px 18px;border-radius:9px;cursor:pointer;transition:color .2s;white-space:nowrap}
.tgg-opt.is-active{color:#fff}
.tgg-out{color:#8a92aa;font-size:14px}
.tgg-out strong{color:#c7b4ff}

var group = document.getElementById('tggGroup');
var pill = document.getElementById('tggPill');
var out = document.getElementById('tggOut');
var opts = Array.prototype.slice.call(group.querySelectorAll('.tgg-opt'));

// Slide and resize the pill to sit exactly behind the active button.
function movePill(btn) {
  pill.style.width = btn.offsetWidth + 'px';
  pill.style.transform = 'translateX(' + (btn.offsetLeft - pill.offsetLeft) + 'px)';
}

function select(btn) {
  opts.forEach(function (o) {
    o.classList.toggle('is-active', o === btn);
    o.setAttribute('aria-selected', o === btn ? 'true' : 'false');
  });
  movePill(btn);
  out.innerHTML = 'Showing: <strong>' + btn.textContent + '</strong>';
}

opts.forEach(function (btn) {
  btn.addEventListener('click', function () { select(btn); });
});

// Arrow-key navigation between options.
group.addEventListener('keydown', function (e) {
  var i = opts.indexOf(document.activeElement);
  if (i < 0) return;
  if (e.key === 'ArrowRight') { var n = opts[(i + 1) % opts.length]; n.focus(); select(n); }
  if (e.key === 'ArrowLeft') { var p = opts[(i - 1 + opts.length) % opts.length]; p.focus(); select(p); }
});

// Position the pill under the initially active option (and keep it correct on resize).
function init() { movePill(group.querySelector('.tgg-opt.is-active')); }
window.addEventListener('resize', init);
init();