Animated Tabs

jitesh208
Jan 17, 2026 7
Live Preview

Live Editor

<div class="tabs">
  <div class="tab-indicator"></div>

  <button class="tab active" data-tab="0">Bank</button>
  <button class="tab" data-tab="1">Card</button>
  <button class="tab" data-tab="2">Pay Later</button>
</div>
*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  display:grid;
  place-items:center;
  background:#f2f2f2;
  font-family:-apple-system, BlinkMacSystemFont, system-ui;
}

/* Tabs container */
.tabs{
  position:relative;
  width:300px;
  background:#f7f7f8;
  border-radius:18px;
  padding:4px;
  display:flex;
  gap:4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 30px rgba(0,0,0,.12);
}

/* Sliding pill */
.tab-indicator{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(100% / 3 - 4px);
  height:calc(100% - 8px);
  background:linear-gradient(180deg,#111,#000);
  border-radius:14px;
  transition:.45s cubic-bezier(.16,1,.3,1);
  box-shadow:
    0 6px 14px rgba(0,0,0,.35);
}

/* Tabs */
.tab{
  flex:1;
  border:none;
  background:none;
  padding:12px 0;
  font-size:14px;
  color:#8a8a8a;
  cursor:pointer;
  position:relative;
  z-index:1;
  transition:.3s;
}

.tab.active{
  color:#fff;
  font-weight:500;
}
const tabs = document.querySelectorAll('.tab');
const indicator = document.querySelector('.tab-indicator');

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    document.querySelector('.tab.active').classList.remove('active');
    tab.classList.add('active');

    indicator.style.transform = `translateX(${index * 100}%)`;
  });
});
Categories

Animated Tabs

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
