Checkbox animado sólo en CSS3 y HTML5. Se ve genial en formularios, sección de preguntas y respuestas, quizz, etc.
<label class="checkbox">
<input class="checkbox__input" type="checkbox">
<svg class="checkbox__check" width="24" height="24">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</label>
body {
background: #054200;
}
.checkbox {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.checkbox:hover .checkbox__check {
background: #ff4754;
}
.checkbox__input {
width: 0;
height: 0;
opacity: 0;
}
.checkbox__input:checked + .checkbox__check {
background: #ff4754;
stroke-dashoffset: 0;
}
.checkbox__check {
border: 0.2rem solid #ff4754;
background: #054200;
stroke: #f9f9f9;
stroke-dasharray: 25;
stroke-dashoffset: 25;
stroke-linecap: round;
stroke-width: 0.2rem;
border-radius: 0.2rem;
fill: none;
transition: background 0.4s, stroke-dashoffset 0.6s;
}