Zum Bestätigen wischen
Zieh den Knopf bis ans Ende der Schiene, um zu bezahlen. Mit der Tastatur genügt die Eingabetaste.
Einstellungen
Code
<div class="uv-swp"><span class="tx">Zum Bezahlen wischen</span><span class="ok">Zahlung bestätigt</span><button class="kn" type="button" aria-label="Zahlung bestätigen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></button></div>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
Wischen zum Bestätigen setzt eine bewusste Geste vor eine Aktion, die sich schwer rückgängig machen lässt: bezahlen, Geld senden, ein Konto löschen oder eine Tür öffnen. Die Schiene füllt sich hinter dem Knopf mit Farbe, die Beschriftung schimmert als Hinweis auf die Geste, und wer zu früh loslässt, sieht den Knopf zurückfedern.
Am Ende ersetzt ein Haken den Pfeil und der Bestätigungstext erscheint, danach setzt sich das Element zurück. Der Knopf ist ein echter Button, Enter oder Leertaste schließen den Vorgang also auch ohne Ziehen ab.