HTML + CSSFiltres
Onglets à soulignement glissant
Un trait fin glisse sous l’onglet actif et s’élargit un peu quand on survole un autre onglet.
Réglages
16px
1x
Code
<div class="uv-ftu"><button class="on">Tout</button><button>Design</button><button>Code</button><button>Photos</button><span class="l"></span></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
Le choix discret pour les sites de contenu. Un magazine en ligne qui passe de À la une à Culture, Voyage et Cuisine, ou une recette qui sépare ingrédients et préparation. Le soulignement suit le curseur puis se pose sur l’onglet actif, sans voler la vedette. Une bonne base si vous voulez des onglets animés en CSS.
Tout repose sur un trait fin, soignez donc le contraste avec le fond. Pour le contenu en dessous, un simple fondu suffit. Une animation de panneau trop chargée casserait le calme des onglets.