Animated Pill Tabs

An animated pill tabs component built with pure HTML and CSS that presents rounded tab controls with smooth transition effects. It enhances tab interaction feedback and visual continuity without requiring JavaScript.

Usage

Use this component when interfaces require modern tab navigation styling, such as pricing toggles, dashboard filters, feature sections, or mobile friendly content switching layouts.

Implementation

The tab behavior is managed using CSS state selectors and animated background transitions, while pill shaped styling is achieved through border radius and controlled highlight movement. Responsive rules ensure proper stacking across devices.

HTML

<div class="tabs-pill">
  <input type="radio" name="tabs" id="tab-1" checked>
  <label for="tab-1">Overview</label>

  <input type="radio" name="tabs" id="tab-2">
  <label for="tab-2">Details</label>

  <input type="radio" name="tabs" id="tab-3">
  <label for="tab-3">Stats</label>
</div>

<div class="tabs-pill">
  <input type="radio" name="tabs" id="tab-1" checked>
  <label for="tab-1">Overview</label>

  <input type="radio" name="tabs" id="tab-2">
  <label for="tab-2">Details</label>

  <input type="radio" name="tabs" id="tab-3">
  <label for="tab-3">Stats</label>
</div>

CSS

.tabs-pill {
  width: 200px;
  padding: 0.4rem;
  border-radius: 999px;
  background: #f3f4f6;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;

  font-family: system-ui, sans-serif;
}

.tabs-pill input {
  display: none;
}

.tabs-pill label {
  padding: 0.35rem 0;
  border-radius: 999px;

  font-size: 12px;
  text-align: center;

  background: transparent;
  color: #374151;

  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.tabs-pill input:checked + label {
  background: #6366f1;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .tabs-pill {
    background: #111827;
  }

  .tabs-pill label {
    color: #e5e7eb;
  }

  .tabs-pill input:checked + label {
    background: #818cf8;
    color: #020617;
  }
}

.tabs-pill {
  width: 200px;
  padding: 0.4rem;
  border-radius: 999px;
  background: #f3f4f6;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;

  font-family: system-ui, sans-serif;
}

.tabs-pill input {
  display: none;
}

.tabs-pill label {
  padding: 0.35rem 0;
  border-radius: 999px;

  font-size: 12px;
  text-align: center;

  background: transparent;
  color: #374151;

  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.tabs-pill input:checked + label {
  background: #6366f1;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .tabs-pill {
    background: #111827;
  }

  .tabs-pill label {
    color: #e5e7eb;
  }

  .tabs-pill input:checked + label {
    background: #818cf8;
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses pill shaped tab styling
• Enhances smooth tab transition clarity
• Fully responsive across breakpoints
• Suitable for dashboards and landing pages
• Easy to customize animation speed and colors

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.