HTML + CSSCheckboxen

3D-Checkbox zum Umdrehen

Die Box dreht sich beim Ankreuzen in 3D um und zeigt eine grüne Rückseite mit weißem Haken.

Einstellungen

16px
1x

Code

<label class="uv-c3"><input type="checkbox"><span><b></b><b><svg viewBox="0 0 24 24"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg></b></span>Aktivieren</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

Eine Checkbox, die sich umdreht, macht aus einem einfachen Ja ein kleines Ereignis. Nutze sie für „Aktivieren“ neben einer Funktion in den Kontoeinstellungen, zum Zusagen bei einer Event-Einladung oder für Zusatzoptionen in einem Abo-Konfigurator. Die Box dreht sich wie eine Spielkarte um die senkrechte Achse und landet auf ihrer grünen Seite.

Die Rückseite ist immer grün, die Farbe, die fast alle als „passt“ lesen, und folgt deiner Hauptfarbe nicht. Beißt sich das mit deiner Marke, nimm eine andere Checkbox. Die Drehung dauert über eine halbe Sekunde, gut für wenige wichtige Optionen statt langer Listen.