Confetti Burst Checkbox
Coloured dots explode outward from the checkbox the moment it is checked.
Confetti Burst Checkbox the 21st of 23 designs in the 23 CSS Checkboxes collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<label class="cb-confetti">
<input class="cb-confetti__input" type="checkbox" />
<span class="cb-confetti__box">
<svg width="12" height="9" viewBox="0 0 14 11" fill="none">
<polyline
points="1,5.5 5,9.5 13,1"
stroke="white"
stroke-width="2.2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
<span>Click to confetti!</span>
</label> .cb-confetti {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
position: relative;
}
.cb-confetti__input { display: none; }
.cb-confetti__box {
width: 24px; height: 24px; border-radius: 7px;
border: 2px solid rgba(255,108,138,.4);
display: flex; align-items: center;
justify-content: center; color: transparent;
transition: background .25s, border-color .25s,
color .25s;
}
.cb-confetti__input:checked + .cb-confetti__box {
background: #ff6c8a; border-color: #ff6c8a;
color: #fff;
}
.cb-dot {
position: absolute; width: 5px; height: 5px;
border-radius: 50%; pointer-events: none;
animation: cb-confetti-burst .55s ease-out forwards;
}
@keyframes cb-confetti-burst {
0% { transform: translate(0,0) scale(1); opacity: 1; }
100% { transform: translate(var(--tx),var(--ty)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.cb-confetti,
.cb-confetti * {
animation: none !important;
}
}
document.querySelectorAll('.cb-confetti__input').forEach(function(inp) {
inp.addEventListener('change', function() {
if (!inp.checked) return;
var box = inp.nextElementSibling;
var colors = ['#7c6cff','#ff6c8a','#1ed98a','#f5a84a','#3de8f5'];
for (var i = 0; i < 8; i++) {
var dot = document.createElement('span');
dot.className = 'cb-dot';
var angle = (i / 8) * 2 * Math.PI;
var dist = 22 + Math.random() * 14;
dot.style.cssText =
'background:' + colors[i % colors.length] + ';' +
'left:8px;top:8px;' +
'--tx:' + Math.cos(angle) * dist + 'px;' +
'--ty:' + Math.sin(angle) * dist + 'px;';
inp.closest('.cb-confetti').appendChild(dot);
setTimeout(function(d) { d.remove(); }, 600, dot);
}
});
});