.cb-neon {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
}
.cb-neon__input { display: none; }
.cb-neon__box {
width: 22px; height: 22px; border-radius: 6px;
border: 2px solid rgba(124,108,255,.4);
display: flex; align-items: center;
justify-content: center; color: transparent;
transition: all .25s;
}
.cb-neon__input:checked + .cb-neon__box {
background: #7c6cff;
border-color: #7c6cff; color: #fff;
box-shadow:
0 0 12px rgba(124,108,255,.7),
0 0 24px rgba(124,108,255,.3);
} <label class="cb-neon">
<input class="cb-neon__input" type="checkbox" checked />
<span class="cb-neon__box">
<svg width="12" height="9" viewBox="0 0 14 11" fill="none">
<polyline
points="1,5.5 5,9.5 13,1"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</span>
<span>Neon glow on check</span>
</label> Live preview Edit any tab — preview updates live Ready