HTML + CSSButtons

Leuchtender Neon-Button

Ein Button mit Kontur, der beim Hover aufleuchtet, sich füllt und einen breiten farbigen Schein bekommt.

Einstellungen

16px
1x

Code

<button class="uv-neon">Neon</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 Neon-Button entfaltet sich auf dunklem Hintergrund: die Anmeldung zu einem Gaming-Turnier, der Ticket-Button einer Clubnacht oder „Jetzt anhören“ auf der Seite eines Synthwave-Albums. Im Ruhezustand ist er nur eine dünne farbige Linie. Beim Hover füllt er sich und strahlt nach außen, wie eine Leuchtreklame, die angeht.

Auf einer weißen Seite geht der Schein unter, also heb ihn dir für dunkle Designs auf. Die zweite Farbe färbt den äußeren Teil des Leuchtens. Ein leicht anderer Ton als die Hauptfarbe gibt mehr Tiefe als zweimal dieselbe.