Reißverschluss-Tasche
Eine genähte Jeanstasche: Beim Hover fährt der Messingschieber den Reißverschluss entlang und gibt das Futter frei.
Einstellungen
Code
<button class="uvq01-zip" type="button"><span class="ln" aria-hidden="true"><b>-30%</b></span><span class="dn up" aria-hidden="true"><i></i></span><span class="dn dw" aria-hidden="true"><i></i></span><span class="tz" aria-hidden="true"></span><span class="pl" aria-hidden="true"></span><span class="t">Angebot ansehen</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
Denimstruktur, orange Ziernähte und ein Reißverschluss aus Messing lassen diesen Button wie die Gesäßtasche einer Jeans aussehen. Bei Hover oder Tastaturfokus gleitet der Schieber hinüber, sein Anhänger schwingt nach, und der Reißverschluss öffnet sich zu einem V, das ein glänzendes Futter mit einem kleinen Rabatthinweis zeigt. Alles ist CSS, eine animierte Custom Property steuert die Clip-Pfade. Ideal für Modeshops und Sale-Aktionen.
Die Hauptfarbe ist das Futter, die Zweitfarbe der Jeansstoff, schwarze Jeans mit rotem Futter oder Rohdenim mit Senfgelb sind also schnell gemacht. Halte die Beschriftung kurz und in Großbuchstaben und passe den Hinweis im Futter an dein Angebot an.