.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; }
} <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> 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);
}
});
}); Live preview Edit any tab — preview updates live Ready