Segmented Control — Free HTML CSS JS Snippet

<div class="demo">
  <div class="group">
    <div class="seg" id="s1">
      <button class="seg-btn active" onclick="pick(this,'s1')">Monthly</button>
      <button class="seg-btn"        onclick="pick(this,'s1')">Quarterly</button>
      <button class="seg-btn"        onclick="pick(this,'s1')">Yearly</button>
      <div class="indicator" id="ind-s1"></div>
    </div>
  </div>

  <div class="group">
    <label class="group-label">View mode</label>
    <div class="seg seg-icons" id="s2">
      <button class="seg-btn active" onclick="pick(this,'s2')" title="Grid">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
      </button>
      <button class="seg-btn" onclick="pick(this,'s2')" title="List">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
      </button>
      <button class="seg-btn" onclick="pick(this,'s2')" title="Columns">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="4" height="18" rx="1"/><rect x="10" y="3" width="4" height="18" rx="1"/><rect x="17" y="3" width="4" height="18" rx="1"/></svg>
      </button>
      <div class="indicator" id="ind-s2"></div>
    </div>
  </div>

  <div class="group">
    <label class="group-label">Size</label>
    <div class="seg seg-sm" id="s3">
      <button class="seg-btn active" onclick="pick(this,'s3')">XS</button>
      <button class="seg-btn" onclick="pick(this,'s3')">SM</button>
      <button class="seg-btn" onclick="pick(this,'s3')">MD</button>
      <button class="seg-btn" onclick="pick(this,'s3')">LG</button>
      <button class="seg-btn" onclick="pick(this,'s3')">XL</button>
      <div class="indicator" id="ind-s3"></div>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }

.demo { display: flex; flex-direction: column; gap: 20px; }
.group { display: flex; flex-direction: column; gap: 8px; }
.group-label { font-size: 12px; font-weight: 600; color: #64748b; }

.seg {
  display: inline-flex; position: relative;
  background: #e2e8f0; border-radius: 10px;
  padding: 3px; gap: 0;
}

.seg-btn {
  position: relative; z-index: 1;
  padding: 7px 18px; font-size: 13px; font-weight: 600;
  color: #64748b; background: none; border: none;
  cursor: pointer; border-radius: 7px;
  transition: color 0.2s; font-family: inherit;
  white-space: nowrap;
}
.seg-btn.active { color: #1e293b; }
.seg-icons .seg-btn { padding: 8px 12px; }
.seg-sm .seg-btn { padding: 5px 12px; font-size: 11px; }

.indicator {
  position: absolute; top: 3px; bottom: 3px;
  background: #fff; border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}

function pick(btn, segId) {
  const seg = document.getElementById(segId);
  seg.querySelectorAll('.seg-btn').forEach(b => b.classList.remove('active'));
  btn.classList.add('active');
  const ind = document.getElementById('ind-' + segId);
  const segRect = seg.getBoundingClientRect();
  const btnRect = btn.getBoundingClientRect();
  ind.style.left  = (btnRect.left - segRect.left) + 'px';
  ind.style.width = btnRect.width + 'px';
}

['s1','s2','s3'].forEach(id => {
  const active = document.querySelector('#' + id + ' .seg-btn.active');
  if (active) pick(active, id);
});
window.addEventListener('resize', () => {
  ['s1','s2','s3'].forEach(id => {
    const active = document.querySelector('#' + id + ' .seg-btn.active');
    if (active) pick(active, id);
  });
});