Kerzen-Toggle

Der Docht entzündet eine flackernde Flamme, die warmes Licht um die Kerze wirft.

Einstellungen

Hauptfarbe#ff8a00

Zweitfarbe#ffe28a

Größe16px

Tempo1x

Text

Code

index.html

<label class="uv-tcd"><input type="checkbox" role="switch"><span class="cd"><span class="gw"></span><span class="fl"></span><span class="wk"></span><span class="bd"></span></span>Ambiente-Modus</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 Schalter

Alle ansehen: Schalter

Elastischer iOS-Toggle

SchalterHTML + CSS

Schalter für Tag und Nacht

SchalterHTML + CSS

ON/OFF-Schalter mit Text

SchalterHTML + CSS

Neon-Schalter mit Leuchten

SchalterHTML + CSS

Toggle mit Kreuz und Haken

SchalterHTML + CSS

Toggle im Soft-UI-Stil

SchalterHTML + CSS

Wandlichtschalter

SchalterHTML + CSS

Flüssiger Toggle

SchalterHTML + CSS

Wofür du ihn nutzen kannst

Ein gemütlicher Toggle für gemütliche Funktionen. Aus steht die Kerze unangezündet mit ihrem kleinen Wachstropfen, an wächst mit federndem Sprung eine Flamme aus dem Docht und flackert weiter, während ein warmer Schein um sie atmet. Nutze ihn für Ambiente- oder Nachtmodus, Entspannungs-Apps, Tischreservierungen oder saisonale Kampagnen.

Die Hauptfarbe ist die äußere Flamme und der Schein, die zweite der helle Kern. Das Flackern ist eine kurze, dezente Animation, die bei reduzierter Bewegung ganz stoppt.