HTML + CSSCheckboxen

Wende-Checkbox mit Verlauf

Die Box dreht sich in 3D um und zeigt ihre Rückseite: ein Quadrat mit Verlauf und Häkchen.

Einstellungen

16px
1x

Code

<label class="uv-ck2f"><input type="checkbox"><span class="bx"><i class="fr"></i><i class="bk"><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></i></span>3D 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

Das Umdrehen macht Spaß bei Extras, die man einzeln dazubucht: „Frühstück hinzufügen“ bei der Hotelbuchung, Geschenkverpackung im Checkout oder die Beläge im Pizza-Konfigurator. Jede Box wendet sich wie eine Karte, und man sieht sofort, was ausgewählt ist. Eine 3D-Checkbox in CSS mit weichem Schatten auf der Rückseite.

Die Drehung dauert etwas länger als ein normaler Haken. Für kurze Listen passt sie daher besser als für lange Einstellungsseiten. Stell das Tempo langsamer, wenn deine Marke ruhig ist, oder schneller für etwas Verspielteres.