.cb-multi {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
background: none; border: none; color: #f0eeff;
font-size: 14px; padding: 0;
}
.cb-multi__box {
width: 24px; height: 24px; border-radius: 7px;
border: 2px solid rgba(255,255,255,.2);
display: flex; align-items: center;
justify-content: center; color: transparent;
transition: all .25s cubic-bezier(.23,1,.32,1);
}
.cb-multi__tick {
transform: scale(0);
transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cb-multi[data-state="1"] .cb-multi__box {
background: #f5a84a; border-color: #f5a84a;
color: #fff;
}
.cb-multi[data-state="1"] .cb-multi__tick {
transform: scale(.55);
}
.cb-multi[data-state="2"] .cb-multi__box {
background: #1ed98a; border-color: #1ed98a;
color: #fff;
box-shadow: 0 0 14px rgba(30,217,138,.4);
}
.cb-multi[data-state="2"] .cb-multi__tick {
transform: scale(1);
} <button class="cb-multi" data-state="0" aria-pressed="false">
<span class="cb-multi__box">
<svg class="cb-multi__tick" 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 class="cb-multi__label">Click to cycle</span>
</button> document.querySelectorAll('.cb-multi').forEach(function(btn) {
btn.addEventListener('click', function() {
var s = (parseInt(btn.dataset.state || '0') + 1) % 3;
btn.dataset.state = s;
var labels = ['Click to cycle', 'Partial', 'Checked'];
btn.querySelector('.cb-multi__label').textContent = labels[s];
});
}); Live preview Edit any tab — preview updates live Ready