Streichholz-Button
Eine Streichholzschachtel: Ein Klick schlägt Funken und entzündet das Hölzchen, ein zweiter bläst es mit etwas Rauch aus.
Einstellungen
Code
<button class="uvq01-mch" type="button" aria-pressed="false"><span class="m" aria-hidden="true"><span class="fl"><i></i><i></i></span><span class="sm"></span></span><span class="t">Einschalten</span><span class="st" aria-hidden="true"></span></button>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 Buttons
Alle ansehen: ButtonsWofür du ihn nutzen kannst
Dieser Umschalter ist als Seite einer Streichholzschachtel gezeichnet, mit gedrucktem Rahmen, rauer Reibfläche und einem einzelnen Streichholz links. Beim Hover beginnt der Kopf zu glimmen, beim Klick sprühen Funken und darüber flackert eine Flamme aus CSS, während die Schachtel warm wird. Der Kopf verkohlt beim Brennen, und beim Ausschalten steigt ein feiner Rauchfaden auf. Ideal für Kerzenläden, Lagerfeuer-Geschichten oder einen Dunkelmodus-Schalter.
Die Hauptfarbe ist die Flamme, die Zweitfarbe der Zündkopf, eine blaue Gasflamme oder ein grüner Kopf sind also schnell gemacht. Der Zustand steht in aria-pressed, bei reduzierter Bewegung brennt die Flamme ruhig statt zu flackern.