Chips con borde degradado
El chip activo lleva un anillo de degradado que gira despacio y los demás brillan suavemente al pasar el ratón.
Ajustes
Código
<div class="uv-fcg"><button>Todo</button><button class="on">Diseño</button><button>Código</button><button>Fotos</button><button>Vídeo</button></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Este funciona mejor sobre fondo oscuro. Imagina la web de un festival donde la gente filtra el cartel por escenario o por estilo, o una tienda de videojuegos que ordena por plataforma. El anillo que gira marca la opción elegida sin rellenarla, así el texto se sigue leyendo bien. Encaja si buscas botones con borde degradado en CSS.
Elige dos colores cercanos, como violeta y rosa, y el anillo se verá rico en lugar de chillón. Que gire solo un chip a la vez. En una tienda clara y minimalista puede desentonar, así que pruébalo antes en su sitio.