.cb-magnet {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
}
.cb-magnet__input { display: none; }
.cb-magnet__box {
width: 26px; height: 26px; border-radius: 8px;
border: 2px solid rgba(124,108,255,.4);
display: flex; align-items: center;
justify-content: center; color: transparent;
transition: background .25s, border-color .25s,
color .25s;
will-change: transform;
}
.cb-magnet__input:checked + .cb-magnet__box {
background: #7c6cff; border-color: #7c6cff;
color: #fff;
} <label class="cb-magnet">
<input class="cb-magnet__input" type="checkbox" checked />
<span class="cb-magnet__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>Magnetic checkbox</span>
</label> document.querySelectorAll('.cb-magnet__box').forEach(function(box) {
box.addEventListener('mousemove', function(e) {
var r = box.getBoundingClientRect();
var x = (e.clientX - r.left - r.width / 2) * 0.3;
var y = (e.clientY - r.top - r.height / 2) * 0.3;
box.style.transform = 'translate(' + x + 'px,' + y + 'px)';
});
box.addEventListener('mouseleave', function() {
box.style.transform = '';
});
}); Live preview Edit any tab — preview updates live Ready