HTML + CSSSchalter

Flugmodus-Toggle

Das Flugzeug hebt zwischen ziehenden Wolken über die Schiene ab und dreht sich bei der Landung.

Einstellungen

16px
1x

Code

<label class="uv-tap"><input type="checkbox" role="switch"><span class="tr"><i class="cl a"></i><i class="cl b"></i><span class="kn"><svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21 15.5v-1.8l-7.6-4.6V4a1.4 1.4 0 0 0-2.8 0v5.1L3 13.7v1.8l7.6-2.4v4.5L8.6 19v1.4l3.4-1 3.4 1V19l-2-1.4v-4.5z"/></svg></span></span>Flugmodus</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

Wofür du ihn nutzen kannst

Eine vertraute Handy-Einstellung mit kleiner Geschichte: Der Knopf trägt ein Flugzeug, das im ausgeschalteten Zustand nach oben zeigt, dann ans andere Ende fliegt, sich schräg legt und an zwei kleinen Wolken vorbeizieht, die weiter durch die orange Schiene treiben. Passt wunderbar zu Reise-Apps, Buchungsseiten und jedem Offline- oder Fokusmodus.

Orange folgt der Systemkonvention, für eine eigene Marke passt aber jede Farbe. Die Wolken bewegen sich nur bei eingeschaltetem Schalter und stoppen bei reduzierter Bewegung, im Ruhezustand lenkt also nichts ab.