Checkbox mit Kreisfüllung
Ein Kreis mit Farbverlauf wächst aus der Mitte, bis er die Box füllt. Danach erscheint das Häkchen.
Einstellungen
Code
<label class="uv-ck2c"><input type="checkbox"><span class="bx"><i></i><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></span>Angemeldet bleiben</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
Denk an das Feld „Angemeldet bleiben“ unter einem Login oder an „Meine Daten für das nächste Mal speichern“ im Checkout. Für solche kleinen, ruhigen Entscheidungen passt eine Füllung, die aus der Mitte wächst: etwas Farbe, etwas Weichheit, aber nichts Aufdringliches. Wer eine CSS-Checkbox mit Farbverlauf sucht, ist hier richtig.
Der Verlauf nutzt zwei Farben. Wähl am besten zwei, die nah beieinander liegen, etwa zwei Blautöne oder Pink und Orange. Starke Gegensätze wirken in so einer kleinen Box schnell schmutzig und unruhig.