Münzwurf-Schalter

Eine Münze hüpft und dreht sich in 3D, um von der Euro-Seite auf die Dollar-Seite zu wechseln.

Einstellungen

Hauptfarbe#e8b53a

Zweitfarbe#b8c1cc

Größe16px

Tempo1x

Text

Code

index.html

<label class="uvq03-con"><input type="checkbox" role="switch"><span class="st"><span class="cn"><b class="f a">€</b><b class="f b">$</b></span><i class="sd"></i></span>Preise in Dollar</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 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

Dieser Schalter ist eine Münze mit zwei Seiten: eine goldene mit Eurozeichen und eine silberne mit Dollarzeichen. Beim Umschalten wird die Münze leicht hochgeworfen und dreht sich mehrmals in 3D, bevor sie auf der anderen Seite landet, während ihr Schatten am Boden schrumpft und wächst. Die Seiten nutzen backface-visibility, ein kurzes Skript wiederholt den Sprung. Passt zu Währungsauswahl, Preisseiten und Shops.

Die zwei Farben bestimmen das Metall jeder Seite. Ersetze die Zeichen im HTML durch Pfund, Yen oder ein anderes Optionspaar und mach in der Beschriftung klar, was die aktive Seite bedeutet.