Checkbox, die sich mit Wasser füllt
Im Kästchen steigt Wasser in Wellen, ein paar Blasen steigen auf und dann erscheint der Haken.
Einstellungen
Code
<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>2 Liter Wasser trinken</label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Checkboxen
Alle ansehen: CheckboxenWofür du ihn nutzen kannst
Diese Checkbox füllt sich wie ein Glas. Beim Abhaken steigen zwei drehende Wellenschichten vom Boden auf, ein paar Blasen treiben nach oben, und ein weißer Haken erscheint, sobald sich das Wasser knapp unter dem Rand beruhigt. Beim Überfahren hebt sich der Pegel leicht als Hinweis. Nur HTML und CSS, passend für Habit-Tracker, Trinkerinnerungen, Garten-Apps und Wellness-Checklisten.
Die Hauptfarbe ist die vordere Welle, die Zweitfarbe die hellere hintere, also probiere Petrol und Aqua, Bernstein und Honig oder Beerentöne für Saft. Der Tempo-Regler ändert, wie schnell die Wellen rollen und das Wasser steigt.