This toggle tabs slider switches between sections using a sliding indicator, creating a smooth UX.
HTML
<div class="ss-tabs toggle preview">
<input type="radio" name="billing" id="monthly" checked>
<label for="monthly">Monthly</label>
<input type="radio" name="billing" id="yearly">
<label for="yearly">Yearly</label>
</div>CSS
.ss-tabs.toggle.preview{
display:inline-flex;
gap:4px;
padding:4px;
border-radius:999px;
background:var(--toggle-bg);
border:1px solid var(--toggle-border);
font-size:13px;
}
.ss-tabs.toggle.preview input{
display:none;
}
.ss-tabs.toggle.preview label{
padding:6px 14px;
border-radius:999px;
cursor:pointer;
color:var(--toggle-text);
transition:background .2s ease, color .2s ease;
}
#monthly:checked + label,
#yearly:checked + label{
background:var(--toggle-active-bg);
color:var(--toggle-active-text);
}
:root{
--toggle-bg:#e5e7eb;
--toggle-border:#d1d5db;
--toggle-text:#0f172a;
--toggle-active-bg:#2563eb;
--toggle-active-text:#ffffff;
}
@media (prefers-color-scheme: dark){
:root{
--toggle-bg:#1f2937;
--toggle-border:#374151;
--toggle-text:#e5e7eb;
--toggle-active-bg:#3b82f6;
--toggle-active-text:#ffffff;
}
}Notes
- Toggle-style tabs
- Great for pricing UI
- Clean interaction
- Easy to animate
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.