Filter-Chips mit gleitender Pille
Filter-Chips, bei denen eine farbige Pille zur gewählten Option gleitet und sich an deren Breite anpasst.
Einstellungen
Code
<div class="uv-fcs"><button class="on">Alle</button><button>Design</button><button>Code</button><button>Fotos</button><button>Video</button><span class="p"></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
Diese Chips passen gut zu einem Portfolio mit gemischten Arbeiten, etwa einem Studio, das Branding, Webdesign, Fotografie und Video auf einer Seite zeigt. Ein Tipp auf die Kategorie, und die Pille wandert hinüber. So sieht man immer, welcher Filter gerade aktiv ist. Wer animierte Filter-Chips mit HTML und CSS sucht, findet hier die schlichte Variante.
Halte die Beschriftungen kurz, ein oder zwei Wörter reichen. Bricht die Zeile um, verliert die Pille ihren Weg. Fünf oder sechs Kategorien sind ein gutes Maximum, bei mehr ist ein Dropdown die freundlichere Lösung für deine Besucher.