HTML + CSSFilter

Tabs mit Leuchtbalken

Unter dem gewählten Tab sitzt ein kurzer Lichtbalken, der samt Schein zum neuen Tab gleitet.

Einstellungen

16px
1x

Code

<div class="uv-ftg"><button>Start</button><button class="on">Entdecken</button><button>Gespeichert</button><button>Profil</button><span class="g"></span></div>

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 Filter

Wofür du ihn nutzen kannst

Gemacht für dunkle Oberflächen. Die obere Navigation einer Musik-App mit Start, Entdecken, Gespeichert und Profil, oder das Menü einer Gaming-Community. Der Schein gibt dem aktiven Tab einen Neon-Look, als wäre er von unten beleuchtet. Wer leuchtende Tabs oder eine Neon-Navigation mit CSS sucht, fängt am besten hier an.

Auf weißem Hintergrund verpufft der Glow, er gehört also in dunkle Themes. Eine kräftige Akzentfarbe genügt, Cyan, Limettengrün oder Pink funktionieren gut. Lass unter den Tabs etwas Platz, damit sich das Licht ausbreiten kann.