Tabs mit gleitender Unterstreichung
Eine feine Linie gleitet unter den aktiven Tab und wird beim Hover über einen anderen etwas breiter.
Einstellungen
Code
<div class="uv-ftu"><button class="on">Alle</button><button>Design</button><button>Code</button><button>Fotos</button><span class="l"></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
Die zurückhaltende Wahl für Content-Seiten. Ein Online-Magazin mit den Rubriken Neu, Kultur, Reisen und Essen, oder ein Rezept, das Zutaten und Zubereitung trennt. Die Linie folgt dem Cursor und bleibt am aktiven Tab stehen. Das wirkt aufgeräumt und drängt sich nicht auf. Eine solide Grundlage, wenn du animierte Tabs mit CSS brauchst.
Alles hängt an einer dünnen Linie, achte also auf genug Kontrast zum Hintergrund. Für den Inhalt darunter reicht ein einfaches Einblenden. Aufwendige Panel-Animationen würden die Ruhe der Tabs nur stören.