A pricing section with monthly and yearly toggle built using pure HTML and CSS that allows users to switch between billing cycles within the same layout. It provides interactive billing comparison clarity without requiring JavaScript.
Usage
Use this component when subscription pricing offers multiple billing intervals, such as SaaS platforms, memberships, or service plans that provide discounts for annual commitments.
Implementation
The toggle behavior is handled using CSS state selectors and conditional display techniques, allowing pricing values to switch visually based on user selection. Responsive rules ensure pricing cards and toggle controls remain aligned across screen sizes.
HTML
<div class="billing-toggle">
<span class="label monthly">Monthly</span>
<input type="checkbox" id="billing" hidden>
<label for="billing" class="switch"></label>
<span class="label yearly">Yearly <small>(–20%)</small></span>
</div>
<div class="pricing">
<div class="plan">
<h3>Starter</h3>
<div class="price">
<span class="monthly">$12</span>
<span class="yearly">$96</span>
</div>
<p>For personal projects</p>
<button>Get started</button>
</div>
<div class="plan featured">
<span class="badge">Most Popular</span>
<h3>Pro</h3>
<div class="price">
<span class="monthly">$29</span>
<span class="yearly">$232</span>
</div>
<p>Best for growing teams</p>
<button>Upgrade</button>
</div>
<div class="plan">
<h3>Enterprise</h3>
<div class="price">
<span class="monthly">$99</span>
<span class="yearly">$792</span>
</div>
<p>Advanced & custom needs</p>
<button>Contact sales</button>
</div>
</div>CSS
:root {
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #0f172a;
--muted: #64748b;
--primary: #2563eb;
--border: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #020617;
--card-bg: #0f172a;
--text: #e5e7eb;
--muted: #94a3b8;
--primary: #3b82f6;
--border: #1e293b;
}
}
.billing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
font-size: 0.9rem;
color: var(--text);
}
.billing-toggle small {
color: var(--muted);
}
.switch {
width: 44px;
height: 24px;
background: var(--border);
border-radius: 999px;
position: relative;
cursor: pointer;
transition: background 0.2s ease;
}
.switch::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
background: #fff;
border-radius: 50%;
top: 3px;
left: 3px;
transition: transform 0.2s ease;
}
#billing:checked + .switch {
background: var(--primary);
}
#billing:checked + .switch::before {
transform: translateX(20px);
}
.pricing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
background: var(--bg);
padding: 16px;
}
.plan {
position: relative;
padding: 24px;
background: var(--card-bg);
border-radius: 16px;
text-align: center;
border: 1px solid var(--border);
color: var(--text);
}
.plan h3 {
margin-bottom: 8px;
}
.price {
font-size: 2rem;
font-weight: 700;
margin: 12px 0;
}
.price .yearly {
display: none;
}
#billing:checked ~ .pricing .price .monthly {
display: none;
}
#billing:checked ~ .pricing .price .yearly {
display: inline;
}
.plan p {
font-size: 0.9rem;
color: var(--muted);
}
.plan.featured {
background: var(--primary);
color: #fff;
border: none;
box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
}
.plan.featured p {
color: rgba(255, 255, 255, 0.85);
}
.badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: #fff;
color: var(--primary);
font-size: 0.7rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.plan button {
margin-top: 16px;
padding: 10px 16px;
border-radius: 999px;
border: none;
font-weight: 600;
cursor: pointer;
background: var(--primary);
color: #fff;
}
.plan.featured button {
background: #fff;
color: var(--primary);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Supports monthly and yearly billing views
- Uses controlled CSS based state switching
- Maintains consistent pricing card alignment
- Fully responsive across breakpoints
- Ideal for SaaS and subscription based platforms
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.