Button mit rollendem Text
Beim Hover rollt die Beschriftung nach oben weg und von unten kommt eine zweite Botschaft.
Einstellungen
Code
<button class="uv-roll"><span data-t="Los geht’s!">Hallo</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
Wofür du ihn nutzen kannst
Mit rollendem Text sagt ein Button zwei Dinge auf gleichem Platz. Aus „Speisekarte“ wird auf einer Restaurantseite „Was gibt's heute?“, aus „Kontakt“ im Freelancer-Portfolio „Sag hallo“ und aus „Tarif wählen“ in der Preistabelle „Los geht's“. Der Wechsel hat einen kleinen Federeffekt, der ihn sympathisch macht.
Beide Texte sollten ungefähr gleich lang sein, sonst wirkt der Button mitten in der Animation leer oder gequetscht. Der zweite Text sollte etwas hinzufügen, einen Tonfall oder ein Versprechen. Wiederholt er nur den ersten, reicht auch ein schlichter Hover.