Chips mit Verlaufsrahmen
Der aktive Chip bekommt einen langsam rotierenden Farbverlauf als Rahmen, die anderen leuchten beim Hover leicht auf.
Einstellungen
Code
<div class="uv-fcg"><button>Alle</button><button class="on">Design</button><button>Code</button><button>Fotos</button><button>Video</button></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
Dieser Filter fühlt sich auf dunklem Hintergrund am wohlsten. Denk an eine Festivalseite, auf der man das Line-up nach Bühne oder Genre filtert, oder an einen Games-Shop mit Filtern nach Plattform. Der drehende Ring markiert die Auswahl, ohne sie zu füllen, und der Text bleibt gut lesbar. Passt, wenn du Buttons mit Verlaufsrahmen in CSS suchst.
Nimm zwei Farben, die nah beieinander liegen, etwa Violett und Pink. Dann wirkt der Ring edel statt grell. Es sollte immer nur ein Chip rotieren. In einem hellen, minimalistischen Shop kann er fremd wirken, also probier ihn vorher im echten Layout aus.