These tabs use a soft surface contrast to indicate active state without underlines, sliders, or heavy motion.
HTML
<div class="tabs-soft">
<button class="is-active">Overview</button>
<button>Usage</button>
<button>Billing</button>
</div>CSS
.tabs-soft {
width: 200px;
padding: 0.3rem;
border-radius: 14px;
background: #1f2933;
display: flex;
gap: 0.25rem;
}
.tabs-soft button {
flex: 1;
padding: 0.4rem 0;
border-radius: 10px;
border: none;
background: transparent;
color: #d1d5db;
font-size: 11px;
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.tabs-soft button.is-active {
background: #374151;
color: #ffffff;
font-weight: 600;
}Notes
- No underline or indicator
- Clear contrast in dark mode
- Preview-friendly sizing
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.