Categoría: HTML5 y CSS3

Checkbox animado sólo en CSS3 y HTML5. Se ve genial en formularios, sección de preguntas y respuestas, quizz, etc.

Pure animated check box only CSS3

Código en HTML5:


<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>		

Código del Css3:


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;
}

Utilizamos cookies para aportar una mejor experiencia al usuario en nuestro sitio web. Si sigues navegando, entendemos que aceptas su uso Más información de cookies