23 CSS Checkboxes 15 / 23
Gooey Blob Checkbox
A morphing blob shape squishes into view with spring easing when checked.
The code
<label class="cb-blob">
<input class="cb-blob__input" type="checkbox" checked />
<span class="cb-blob__box">
<span class="cb-blob__shape"></span>
</span>
<span>Gooey blob checkbox</span>
</label> <label class="cb-blob">
<input class="cb-blob__input" type="checkbox" checked />
<span class="cb-blob__box">
<span class="cb-blob__shape"></span>
</span>
<span>Gooey blob checkbox</span>
</label>.cb-blob {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
}
.cb-blob__input { display: none; }
.cb-blob__box {
width: 28px; height: 28px; border-radius: 8px;
border: 2px solid rgba(124,108,255,.3);
display: flex; align-items: center;
justify-content: center; overflow: hidden;
}
.cb-blob__shape {
width: 18px; height: 18px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
border-radius: 0;
transform: scale(0) rotate(45deg);
transition: transform .45s cubic-bezier(.34,1.56,.64,1),
border-radius .45s ease;
}
.cb-blob__input:checked
+ .cb-blob__box .cb-blob__shape {
transform: scale(1) rotate(0deg);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
} .cb-blob {
display: inline-flex; align-items: center;
gap: 10px; cursor: pointer; user-select: none;
}
.cb-blob__input { display: none; }
.cb-blob__box {
width: 28px; height: 28px; border-radius: 8px;
border: 2px solid rgba(124,108,255,.3);
display: flex; align-items: center;
justify-content: center; overflow: hidden;
}
.cb-blob__shape {
width: 18px; height: 18px;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
border-radius: 0;
transform: scale(0) rotate(45deg);
transition: transform .45s cubic-bezier(.34,1.56,.64,1),
border-radius .45s ease;
}
.cb-blob__input:checked
+ .cb-blob__box .cb-blob__shape {
transform: scale(1) rotate(0deg);
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}