A checkbox pattern that confirms selection through a sliding check motion instead of scale or bounce.
HTML
<label class="check-slide">
<input type="checkbox">
<span class="check-slide__box"></span>
</label>CSS
.check-slide {
width: 200px;
display: flex;
justify-content: center;
}
.check-slide input {
display: none;
}
.check-slide__box {
width: 18px;
height: 18px;
border-radius: 6px;
background: #f3f4f6;
position: relative;
cursor: pointer;
transition: background 150ms ease;
}
.check-slide__box::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 4px;
background: #6366f1;
transform: translateX(-120%);
transition: transform 180ms ease;
}
.check-slide input:checked + .check-slide__box {
background: #eef2ff;
}
.check-slide input:checked + .check-slide__box::after {
transform: translateX(0);
}
@media (prefers-color-scheme: dark) {
.check-slide__box {
background: #020617;
}
.check-slide input:checked + .check-slide__box {
background: #1e1b4b;
}
}Notes
- Directional feedback
- No bounce or scale
- Works well in settings
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.