HTML + CSSSchalter

Reißverschluss-Schalter

Der Zipper gleitet über einen Jeansstoff, und die Messingzähne greifen hinter ihm einer nach dem anderen ineinander.

Einstellungen

16px
1x

Code

<label class="uvq03-zip"><input type="checkbox" role="switch"><span class="fb"><span class="tt"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i></span><span class="tb"><i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i><i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i><i style="--i:8"></i><i style="--i:9"></i><i style="--i:10"></i></span><span class="pl"><i></i></span></span>Privater Modus</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

Wofür du ihn nutzen kannst

Dieser Schalter ist ein Reißverschluss im Kleinformat: ein Stück Jeansstoff mit Steppnaht, zwei Reihen Messingzähne und ein Metallschieber mit baumelndem Anhänger. Beim Einschalten wandert der Schieber nach rechts, und jeder Zahn schließt sich mit kurzer Verzögerung, sodass sich der Verschluss hinter ihm zuzieht. Am Ende pendelt der Anhänger nach. Passt zu Privatsphäre-Einstellungen, gesperrten Ordnern und Modemarken.

Die Hauptfarbe ist der Stoff, die zweite das Metall der Zähne. Probiere olivgrünes Canvas mit Silber oder schwarzes Leder mit Gold und halte die Beschriftung kurz, weil der Reißverschluss schon breit ist.