HTML + CSSCheckboxes
Checkbox con onda
Al marcarlo, un anillo de color se expande alrededor del cuadro y se desvanece, como una gota en el agua.
Ajustes
16px
1x
Código
<label class="uv-ck2r"><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></em></span>Notificaciones</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
La onda encaja en pantallas de ajustes donde cada fila es un checkbox: las preferencias de notificaciones de tu cuenta, el «Avisarme de pedidos nuevos» del panel de una tienda o las alertas de una app del banco. El anillo te indica qué fila acabas de cambiar. Un checkbox con efecto onda en HTML y CSS.
La onda se apaga sola y no se repite, así que no molesta en listas largas. Si tus filas están muy juntas, sepáralas un poco para que el anillo tenga espacio.