Chips à bordure dégradée
Le chip actif porte un anneau en dégradé qui tourne lentement, les autres s’éclairent doucement au survol.
Réglages
Code
<div class="uv-fcg"><button>Tout</button><button class="on">Design</button><button>Code</button><button>Photos</button><button>Vidéo</button></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Celui-ci se plaît sur fond sombre. Pensez au site d’un festival où l’on filtre la programmation par scène ou par style, ou à une boutique de jeux vidéo qui trie par console. L’anneau qui tourne signale l’option choisie sans la remplir, le texte reste donc lisible. À retenir si vous cherchez des boutons à bordure en dégradé en CSS.
Choisissez deux couleurs voisines, comme le violet et le rose, et l’anneau paraîtra élégant plutôt que criard. Un seul chip doit tourner à la fois. Sur une boutique claire et épurée, il risque de détonner : testez-le d’abord dans votre maquette.