Outline-Button mit Füllung
Ein Button mit Kontur, der sich beim Hover von links nach rechts mit Farbe füllt.
Einstellungen
Code
<button class="uv-fill">Abonnieren</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
Ein Outline-Button, der sich beim Hover füllt, ist die naheliegende Wahl für Nebenaktionen: „PDF herunterladen“ im Portfolio, „Abonnieren“ im Footer eines Blogs oder „Speisekarte ansehen“ neben einem kräftigeren „Tisch reservieren“. Im Ruhezustand wirkt er leicht und zurückhaltend. Die Farbe schiebt sich von links hinein, der Text wird dabei weiß.
Kombinier ihn mit einem vollflächigen Button in derselben Farbe, dann hast du ohne Zusatzaufwand ein klares Paar aus primärer und sekundärer Aktion. Etwas langsamer eingestellt wirkt die Füllung bewusster, was zu ruhigen Marken gut passt.