Karabiner-Button
Beim Hover schwingt der Schnapper des Karabiners auf; beim Drücken gleitet die Sicherung hoch, das Seil ruckt und alles ist gesichert.
Einstellungen
Code
<button class="uvq01-crb" type="button" aria-label="Sichern" aria-pressed="false"><svg viewBox="0 0 40 60" aria-hidden="true"><g class="rpg"><path class="rp" d="M-2 57C8 45 32 45 42 57"/><path class="rp2" d="M-2 57C8 45 32 45 42 57"/></g><path class="bd" d="M6 16a10 10 0 0 1 10-10h8a10 10 0 0 1 10 10v28a10 10 0 0 1-10 10h-8a10 10 0 0 1-10-10"/><g class="gt"><path d="M6 18v25"/><rect class="sl" x="3" y="33" width="6" height="9" rx="1.8"/></g></svg><span class="w" aria-hidden="true"><span class="a">Sichern</span><span class="b">Gesichert</span></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
Ein Umschalter wie vom Klettergurt: ein orange eloxierter Karabiner, durch den ein Seil läuft, sitzt neben der Beschriftung. Beim Hover drückt sich der federnde Schnapper nach innen, beim Drücken gleitet die Verschlusshülse über die Nase, das Seil ruckt kurz und die Beschriftung wechselt auf gesichert. Verriegelt zuckt der Schnapper beim Hover nur. Passt zu Kletterhallen, Outdoor-Shops und Sicherheitseinstellungen.
Die Hauptfarbe ist das eloxierte Aluminium, die Zweitfarbe das Seil, ein blauer Karabiner mit rotem Seil ist also schnell eingestellt. Der Zustand steht in aria-pressed, bei reduzierter Bewegung passiert jede Änderung sofort.