Drehender Stern als Checkbox

Ein Stern in Umrisslinie, der sich federnd dreht und beim Anhaken warm aufleuchtet.

Einstellungen

Hauptfarbe#ffb400

Zweitfarbe#ffe795

Größe16px

Tempo1x

Text

Code

index.html

<label class="uv-cst"><input type="checkbox"><span class="bx"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8l2.75 5.6 6.15.9-4.45 4.33 1.05 6.12L12 16.87l-5.5 2.88 1.05-6.12L3.1 9.3l6.15-.9z"/></svg></span>Projekt hervorheben</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: Checkboxen

Checkbox mit gezeichnetem Haken

CheckboxenHTML + CSS

Runde Checkbox

CheckboxenHTML + CSS

Checkbox mit Konfetti

CheckboxenHTML + CSS

Aufgabe zum Durchstreichen

CheckboxenHTML + CSS

3D-Checkbox zum Umdrehen

CheckboxenHTML + CSS

Herz als Like-Button

CheckboxenHTML + CSS

Checkbox mit Häkchen und Federeffekt

CheckboxenHTML + CSS

Checkbox mit Kreisfüllung

CheckboxenHTML + CSS

Wofür du ihn nutzen kannst

Nutze ihn überall, wo etwas als wichtig markiert wird: ein Projekt im Dashboard hervorheben, ein Rezept speichern, einen Kontakt anheften oder eine Mail markieren. Die Checkbox ist ein echtes Input hinter einem SVG-Stern, funktioniert also mit Tastatur, behält ihren Fokusring und meldet Screenreadern ihren Zustand.

Beim Anhaken dreht sich der Stern um eine Zacke, wächst leicht und bekommt einen weichen Schein in der Hauptfarbe, die zweite Farbe tönt die Kachel dahinter. Gold steht für Favorit, Blau oder Violett für angeheftet.