Einschaltknopf-Toggle
Ein runder Knopf mit Power-Symbol, der einsinkt, während sich ein Lichtring um ihn zeichnet.
Einstellungen
Code
<label class="uv-tpw"><input type="checkbox" role="switch"><span class="bt"><i class="rg"></i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 3.5v8"/><path d="M7.2 6.6a7 7 0 1 0 9.6 0"/></svg></span>Luftreiniger einschalten</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
Manche Schalter sollen wie ein Gerät aussehen. Dieser ist eine weiche, neumorphe Scheibe mit dem universellen Power-Symbol: Beim Einschalten sinkt sie in die Fläche, das Symbol leuchtet und ein farbiger Ring läuft dank eines animierten konischen Verlaufs um den Rand. Passt zu Luftreinigern, smarten Steckdosen, Servern und Mediaplayern.
Der Ring nutzt eine registrierte CSS-Eigenschaft, der Winkel animiert also in beide Richtungen weich. Die Oberfläche passt sich hellem und dunklem Modus an, das Label daneben erklärt, was angeht.