HTML + CSSCheckboxen

Gasbrenner-Checkbox

Ein Gaskochfeld von oben: Beim Abhaken dreht sich der Knopf, ein Funke springt und ein Kranz blauer Flammen geht an.

Einstellungen

16px
1x

Code

<label class="uvq02-gas"><input type="checkbox"><span class="bn" aria-hidden="true"><span class="gr"></span><span class="fl"><i style="--a:0deg;--i:0"></i><i style="--a:26deg;--i:1"></i><i style="--a:51deg;--i:2"></i><i style="--a:77deg;--i:3"></i><i style="--a:103deg;--i:4"></i><i style="--a:129deg;--i:5"></i><i style="--a:154deg;--i:6"></i><i style="--a:180deg;--i:7"></i><i style="--a:206deg;--i:8"></i><i style="--a:231deg;--i:9"></i><i style="--a:257deg;--i:10"></i><i style="--a:283deg;--i:11"></i><i style="--a:309deg;--i:12"></i><i style="--a:334deg;--i:13"></i></span><span class="cp"></span></span><span class="kn" aria-hidden="true"></span>Herd anzünden</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

Wofür du ihn nutzen kannst

Diese Checkbox ist ein Gaskochfeld von oben, mit schwarzer Emailplatte, gusseisernem Rost, Brennerdeckel und einem Chromknopf daneben. Beim Abhaken dreht sich der Knopf eine Vierteldrehung nach links, ein Funke blitzt auf und vierzehn blaue Flammen zünden nacheinander, die danach sanft mit weichem Schein flackern. Passt zu Koch-Apps, Smart-Kitchen-Steuerungen und Rezept-Timern.

Die Hauptfarbe ist der Flammenfuß und der Schein, die Zweitfarbe die Spitzen, also gehen blaues Gas, oranges Holzfeuer oder eine grüne Fantasieflamme. Mit reduzierter Bewegung bleiben die Flammen an, aber ruhig.