HTML + CSSCheckboxes

Checkbox con confeti

Al marcarla salen disparadas ocho partículas, una pequeña celebración por haber terminado algo.

Ajustes

16px
1x

Código

<label class="uv-cb"><input type="checkbox"><span><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>¡Hecho!</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

Dónde usarlo

Esta checkbox celebra. Encaja en el momento en que alguien acaba algo que le importa: tachar el hábito del día en una app de hábitos, completar el último paso de una lista de bienvenida o dar por hecha una lección en un curso de idiomas. Ocho puntos en tus dos colores salen disparados mientras se dibuja el check.

Guárdala para los logros. En un formulario largo con diez casillas, el confeti cansa a la tercera. Las partículas se salen de la caja, así que déjale algo de espacio, sobre todo si hay varias casillas muy juntas.