Button mit Glanzeffekt
Beim Hover zieht ein Lichtstreifen schräg über den Button, der sich dabei leicht anhebt.
Einstellungen
Code
<button class="uv-shine">Loslegen</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
Dieser Button mit Glanzeffekt passt zum wichtigsten Call-to-Action einer Software-Landingpage: „Kostenlos testen“, „Jetzt starten“ oder „Konto erstellen“. Das Licht huscht einmal darüber, sobald der Cursor ankommt, wie eine Spiegelung im Schaufenster, und der Button hebt sich ein kleines Stück. Wer einen CSS Hover-Effekt für Buttons mit Glanz sucht, bekommt hier die klassische Variante.
Am besten wirkt er auf einer satten, kräftigen Farbe. Bei Pastelltönen sieht man den weißen Streifen kaum. Setz ihn pro Seite nur auf einen Button: Wenn alles glänzt, fällt nichts mehr auf, und die Seite wirkt schnell wie ein Spielautomat.