Casilla que se llena de agua
El agua sube con olas dentro de la casilla, suelta un par de burbujas y después muestra el check encima.
Ajustes
Código
<label class="uvq02-liq"><input type="checkbox"><span class="bx"><i class="w2"></i><i class="w1"></i><i class="bu"></i><i class="bu"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></span>Beber 2 litros de agua</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
Este checkbox se llena como un vaso. Al marcarlo, dos capas de olas que giran suben desde el fondo, flotan un par de burbujas y aparece un check blanco cuando el agua se asienta cerca del borde. Al pasar el ratón el nivel sube un poco como pista. Es solo HTML y CSS y encaja en registros de hábitos, recordatorios para beber agua, apps de jardín y listas de bienestar.
El color principal es la ola delantera y el secundario la de atrás, más clara, así que prueba turquesa y agua, ámbar y miel o tonos de frutos rojos para un zumo. El control de velocidad cambia lo rápido que ruedan las olas y sube el agua.