Equis que se convierte en check
Las dos barras de una equis roja se desplazan y cambian de tamaño hasta formar un check verde al marcar.
Ajustes
Código
<label class="uv-cxm"><input type="checkbox"><span class="bx"><i class="a"></i><i class="b"></i></span>Asistiré al evento</label>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Checkboxes
Ver todos: CheckboxesDónde usarlo
Una casilla que enseña las dos respuestas a la vez funciona muy bien para preguntas de sí o no, como asistir a un evento, aceptar una invitación o marcar un producto como disponible. Desmarcada, muestra una equis roja suave; marcada, las mismas dos barras se mueven, se encogen y giran hasta formar un check mientras el fondo se llena de verde.
Los dos colores se pueden cambiar a tonos de marca o a gris y azul. El movimiento usa una transición con muelle por barra, así que la transformación es suave en los dos sentidos sin keyframes.