Monatlich-jährlich-Toggle

Wechsle von monatlicher zu jährlicher Abrechnung, und ein Spar-Badge springt hinein.

Einstellungen

Hauptfarbe#5b5bf7

Zweitfarbe#15b981

Größe16px

Tempo1x

Text

Code

index.html

<label class="uv-tbi"><input type="checkbox" role="switch"><span class="m">Monatlich</span><span class="tr"><span class="kn"></span></span><span class="y">Jährlich</span><span class="sv">20 % sparen</span></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

Jede Preisseite braucht dieses Element, und das Badge lenkt den Blick auf den Jahrestarif. Beide Labels stehen links und rechts vom Schalter, das aktive ist voll deckend. Bei jährlich dreht sich eine grüne Pille mit dem Rabatt federnd herein, die Ersparnis ist also nicht zu übersehen.

Den Badge-Text änderst du im Textfeld, etwa 20 % sparen oder Zwei Monate gratis. Es ist eine einzige Checkbox, ihren Zustand kannst du im Formular auslesen oder mit wenigen Zeilen an deine Preistabelle koppeln.