HTML + CSSCheckboxes

Checkbox con explosión de chispas

Ocho chispas pequeñas salen disparadas del cuadro en cuanto lo marcas, como una mini celebración.

Ajustes

16px
1x

Código

<label class="uv-ck2b"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg><em><b style="--a:0deg"></b><b style="--a:45deg"></b><b style="--a:90deg"></b><b style="--a:135deg"></b><b style="--a:180deg"></b><b style="--a:225deg"></b><b style="--a:270deg"></b><b style="--a:315deg"></b></em></span>Me gusta</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

Las chispas tienen sentido cuando marcar algo es un pequeño logro o un gesto de cariño: el «Me gusta» de una receta, guardar un producto en la lista de deseos o dar por hecho el hábito del día en una app de seguimiento. Ese estallido premia el clic. Un checkbox con partículas en HTML y CSS.

Mantenlo lejos de los formularios serios. Nadie quiere confeti al aceptar una política de privacidad o elegir un seguro. Las chispas toman el color de acento, así que también lucen sobre fondo oscuro.