HTML + CSSFiltres
Chips remplis depuis le centre
Des chips qui se remplissent de couleur depuis le centre, avec un petit rebond quand on en choisit un.
Réglages
16px
1x
Code
<div class="uv-fcf"><button class="on"><i></i><b>Tout</b></button><button><i></i><b>Design</b></button><button><i></i><b>Code</b></button><button><i></i><b>Photos</b></button><button><i></i><b>Vidéo</b></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
Imaginez un blog de cuisine où l’on passe des entrées aux plats, aux desserts ou aux dîners express. La couleur qui naît au centre du chip répond à chaque clic, comme un bouton qu’on enfonce. Un bon choix pour des chips de catégorie ou un bouton de filtre en CSS avec du caractère.
Le rebond fait tout le charme, mais sur une page remplie de chips il peut vite fatiguer. Ralentissez un peu l’animation et gardez une seule couleur d’accent. À côté de photos de plats, un ton chaud fonctionne souvent mieux qu’un bleu froid.