A simple checkbox using CSS mask
A simple design for your checkbox with a nice animation on click.
- No extra element (only the
<input>tag) - No pseudo-elements
- One value to control the size
- Less than 15 CSS declarations
input {
--s: 90px; /* control the size */
height: var(--s);
aspect-ratio: 2;
border-radius: var(--s);
border: calc(var(--s)/10) solid #0000;
padding: calc(var(--s)/10);
background:
conic-gradient(#8FBE00 50%,#CC333F 0) /* the colors here */
border-box var(--p,left)/200%;
mask:
radial-gradient(50% 50%,#000 98%,#0000) no-repeat
var(--p,left)/calc(3*var(--s)/5) content-box,
linear-gradient(#000 0 0) padding-box,
linear-gradient(#000 0 0);
mask-composite: add, exclude;
transition: .5s;
appearance: none;
}
input:checked {
--p: right;
}See the Pen CSS-only checkbox using mask by Temani Afif (@t_afif) on CodePen.