LED-Leisten-Toggle

Während der Knopf über eine dunkle Schiene gleitet, leuchten nacheinander mehrere LEDs auf.

Einstellungen

Hauptfarbe#00b8ff

Zweitfarbe#a8ecff

Größe16px

Tempo1x

Text

Code

index.html

<label class="uv-tld"><input type="checkbox" role="switch"><span class="tr"><span class="ld"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i></span><span class="kn"></span></span>Gartenbeleuchtung</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

Fünf kleine LEDs sitzen in einer dunklen, gummiartigen Schiene. Beim Einschalten gleitet der Metallknopf ans Ende, die LEDs leuchten hinter ihm der Reihe nach kühl auf und gehen beim Zurückgleiten in umgekehrter Folge aus. Passt zu Gartenbeleuchtung, Gaming-Zubehör, Studiotechnik und jedem Interface mit Hardware-Charakter.

Standard sind Cyan und Eisblau, warmes Bernstein oder Magenta sehen aber auch toll aus. Die Abfolge entsteht nur über Transition-Delays, bleibt dadurch flüssig und leicht und kommt ganz ohne JavaScript aus.