Button mit wachsendem Pfeil
Der Pfeil neben dem Text gleitet beim Hover nach vorne, und seine Linie wird dabei länger.
Einstellungen
Code
<button class="uv-arrow">Weiter<svg viewBox="0 0 24 12"><path class="l" d="M2 6h18"/><path d="M15 1l6 5-6 5"/></svg></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
Wofür du ihn nutzen kannst
Der wachsende Pfeil sagt „weiter“ ohne Worte und passt deshalb zu Schritten, die irgendwohin führen: „Weiter“ in einem mehrstufigen Checkout, „Nächste Lektion“ in einem Onlinekurs oder „Zur Fallstudie“ am Ende eines Portfolio-Projekts. Ein ruhiger Pfeil-Button mit Hover-Animation, der zum Klicken einlädt, statt zu drängeln.
Für Zurück, Abbrechen oder Löschen ist er ungeeignet, denn der Pfeil verspricht Fortschritt. Schön ist er auch als „Nächster Artikel“ unter einem Blogbeitrag, wo die Leute ohnehin im Lesefluss sind und ein kleiner Schubs genügt.