HTML + CSSCheckboxen
Checkbox mit Welleneffekt
Beim Anklicken breitet sich ein Farbring um die Box aus und verblasst, wie ein Tropfen im Wasser.
Einstellungen
16px
1x
Code
<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>Benachrichtigungen</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
Wofür du ihn nutzen kannst
Die Welle passt zu Einstellungsseiten, auf denen jede Zeile eine Checkbox ist: Benachrichtigungen im Kundenkonto, „Mail bei neuen Bestellungen“ im Shop-Backend oder die Hinweise einer Banking-App. Der Ring zeigt dir, welche Zeile du gerade geändert hast, auch wenn du kurz wegschaust. Eine Checkbox mit Ripple-Effekt in HTML und CSS.
Die Welle verblasst von selbst und wiederholt sich nicht, stört also auch in langen Listen nicht. Liegen deine Zeilen sehr eng, gib ihnen etwas mehr Abstand, damit der Ring Platz hat.