AIMRAN
HTML + CSSCheckboxen

Retro-Toaster als Checkbox

Solange sie nicht abgehakt ist, glüht der Schlitz beim Toasten; beim Abhaken springen beide Scheiben goldbraun heraus.

Einstellungen

16px
1x

Code

<label class="uvq02-tst"><input type="checkbox"><span class="ts" aria-hidden="true"><i class="br a"></i><i class="br b"></i><span class="bd"><i class="lv"></i></span><i class="sm"></i><i class="sm"></i></span>Getoastetes Brot</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.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

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

Diese Checkbox ist ein runder Retro-Toaster in Pastellfarbe, mit schwarzem Schlitz, seitlichem Hebel und kleinen Füßen. Solange sie nicht abgehakt ist, glüht der Schlitz orange, als würde das Brot gerade toasten. Beim Abhaken geht der Hebel hoch und beide Scheiben springen federnd heraus, jetzt goldbraun mit dunklerer Kruste, während zwei Dampffäden aufsteigen. Passt zu Frühstückskarten, Rezeptschritten und Hotel-Apps.

Die Hauptfarbe ist der Toast, die Zweitfarbe das Gehäuse, also funktionieren Mint, Buttergelb oder Chrom. Glühen und Dampf stoppen bei reduzierter Bewegung, und es bleibt ein klarer An- und Aus-Zustand.