Toggle mit Gesicht
Der Knopf ist ein schlafendes Gesicht, das rüberrollt, die Augen öffnet, blinzelt und rot wird.
Einstellungen
Code
<label class="uv-tfc"><input type="checkbox" role="switch"><span class="tr"><span class="kn"><i class="e l"></i><i class="e r"></i><i class="ch l"></i><i class="ch r"></i><i class="mo"></i></span></span>Wecker</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: SchalterWofür du ihn nutzen kannst
Ein bisschen Charakter macht aus einem winzigen Element einen Moment, an den man sich erinnert. Aus zeigt der Knopf geschlossene Augen und einen geraden Mund, an rollt er auf die andere Seite, öffnet runde Augen, blinzelt alle paar Sekunden und bekommt rosige Wangen. Ideal für Wecker, Kinder-Apps, Schlaftracker und freundliche Onboarding-Einstellungen.
Die Hauptfarbe füllt die Schiene, die zweite färbt die Wangen. Alles sind einfache CSS-Formen, das Gesicht skaliert also sauber, und das Blinzeln stoppt bei reduzierter Bewegung.