Minimal Checkbox
Essential
Clean checkbox with smooth scale-in checkmark animation and subtle border transitions.
<label class="minimal-cb">
<input type="checkbox" checked>
<span class="minimal-box"><i class="fa-solid fa-check"></i></span>
<span>Enable notifications</span>
</label>
.minimal-cb input:checked ~ .minimal-box {
background: #6366f1;
border-color: #6366f1;
}
.minimal-cb input:checked ~ .minimal-box i {
transform: scale(1);
opacity: 1;
}
Gradient Checkbox
Trending
Vibrant gradient-filled checkbox with animated border glow on check and smooth colour transitions.
<label class="gradient-cb">
<input type="checkbox" checked>
<span class="gradient-box"><i class="fa-solid fa-check"></i></span>
<span>I agree to Terms</span>
</label>
.gradient-cb input:checked ~ .gradient-box {
background: linear-gradient(135deg, #7c3aed, #06b6d4);
border-color: transparent;
box-shadow: 0 0 12px rgba(124,58,237,0.35);
}
Glassmorphism Checkbox
Premium
Frosted translucent checkbox cards with backdrop blur, glowing active states, and icon labels.
<label class="glass-cb">
<input type="checkbox" checked>
<span class="glass-box"><i class="fa-solid fa-check"></i></span>
<span class="glass-text">Two-Factor Auth</span>
</label>
.glass-cb input:checked ~ .glass-box {
background: rgba(99,102,241,0.35);
border-color: rgba(99,102,241,0.6);
box-shadow: 0 0 14px rgba(99,102,241,0.3);
}
Animated Checkbox Toggle
Popular
iOS-inspired toggle switch using a checkbox with a sliding thumb and smooth colour fill transition.
<label class="anim-toggle">
<input type="checkbox" checked>
<span class="anim-track">
<span class="anim-thumb"></span>
</span>
<span>Airplane Mode</span>
</label>
.anim-toggle input:checked ~ .anim-track {
background: #6366f1;
}
.anim-toggle input:checked ~ .anim-track .anim-thumb {
transform: translateX(20px);
}
Task List Checkbox Card
New
Complete task list card with strikethrough animation, progress counter, and interactive checkbox states.
<div class="task-card">
<div class="task-header">
<h4>Today's Tasks</h4>
<span class="task-count">2/4</span>
</div>
<label class="task-item">
<input type="checkbox" checked>
<span class="task-box"><i class="fa-solid fa-check"></i></span>
<span class="task-text done">Design landing page</span>
</label>
</div>
.task-item input:checked ~ .task-text {
text-decoration: line-through;
color: #475569;
}
OVERRIDE
Cyberpunk Glitch Checkbox
Premium
A futuristic glitchy checkbox with a neon crossed-out checkmark and jagged styling.
<label class="cyber-cb">
<input type="checkbox">
<span class="cyber-box"><i class="fa-solid fa-xmark"></i></span>
<span class="cyber-text">OVERRIDE</span>
</label>
Power Up
Neumorphic Checkbox
Popular
Soft UI neumorphic checkbox with extruded shadows and an inset pressed state.
<label class="neumorphic-cb">
<input type="checkbox">
<span class="neu-box"><i class="fa-solid fa-power-off"></i></span>
<span class="neu-text">Power Up</span>
</label>
Heart Favorite Checkbox
Essential
A simple animated heart for "Like" or "Favorite" interactions using standard checkbox inputs.
<label class="heart-cb">
<input type="checkbox">
<span class="heart-icon"><i class="fa-solid fa-heart"></i></span>
</label>
Subscription Plan Checkbox
Trending
A selectable plan card built purely with a hidden checkbox, ideal for pricing tables.
<label class="plan-cb">
<input type="checkbox">
<div class="plan-card">
<div class="plan-header">
<span class="plan-title">Pro Tier</span>
<span class="plan-box"><i class="fa-solid fa-check"></i></span>
</div>
<div class="plan-price">$19<span>/mo</span></div>
<p>Premium features</p>
</div>
</label>
Terms & Conditions Checkbox
Essential
A standard legal agreement checkbox with embedded links and neat alignment.
<label class="terms-cb">
<input type="checkbox">
<span class="terms-box"><i class="fa-solid fa-check"></i></span>
<span class="terms-text">I agree to the <a href="#">Terms</a></span>
</label>
Interactive Jelly Checkbox
Jelly Blob Checkbox
Trending
A fun and elastic spring-like jelly checkbox that scales and bounces when clicked.
<label class="jelly-cb">
<input type="checkbox" checked>
<span class="jelly-box"><i class="fa-solid fa-check"></i></span>
<span class="jelly-text">Interactive Jelly Checkbox</span>
</label>
Neon Cyberpunk Glow
Neon Pulsing Checkbox
Premium
A vibrant cyan checkbox with an intense glowing state and active outer pulse ripple animation.
<label class="neon-cb">
<input type="checkbox">
<span class="neon-box"><i class="fa-solid fa-check"></i></span>
<span class="neon-text">Neon Cyberpunk Glow</span>
</label>
Insert Coin
Retro Arcade Checkbox
New
A retro 8-bit arcade style checkbox utilizing stepping transitions and block pixel checkmarks.
<label class="arcade-cb">
<input type="checkbox" checked>
<span class="arcade-box"></span>
<span class="arcade-text">Insert Coin</span>
</label>
Slide Lock Checkbox
Premium
An interactive sliding track checkbox designed for locking settings or swipe-to-agree interactions.
<label class="slidelock-cb">
<input type="checkbox">
<div class="slidelock-track">Slide to Lock</div>
<div class="slidelock-handle">
<i class="fa-solid fa-angles-right"></i>
</div>
</label>
Enable 3D Acceleration
3D Depth Flip Checkbox
Trending
An isometric 3D depth-tilted card checkbox that rotates and flips upon clicking.
<label class="depth-cb">
<input type="checkbox">
<span class="depth-box"></span>
<span class="depth-text">Enable 3D Acceleration</span>
</label>
Bookmark Checkbox
New
A sleek bookmark toggle for saving items with a smooth scale animation.
<label class="bookmark-cb">
<input type="checkbox">
<span class="bookmark-box"><i class="fa-regular fa-bookmark"></i></span>
</label>
Bell Notification Checkbox
Popular
A notification bell that wiggles and fills with color when checked.
<label class="bell-cb">
<input type="checkbox">
<span class="bell-box"><i class="fa-regular fa-bell"></i></span>
</label>
Star Rating Checkbox
Trending
A rating star that glows beautifully with an amber drop-shadow on activation.
<label class="star-cb">
<input type="checkbox">
<span class="star-box"><i class="fa-regular fa-star"></i></span>
</label>
Power Button Checkbox
Premium
A circular power toggle that mimics a real-world hardware button.
<label class="power-cb">
<input type="checkbox">
<span class="power-box"><i class="fa-solid fa-power-off"></i></span>
</label>
Check Circle Checkbox
Essential
A smooth filling circle that pops a checkmark when selected.
<label class="check-circle-cb">
<input type="checkbox">
<span class="check-circle-box"><i class="fa-solid fa-check"></i></span>
</label>