Background Fill
Fond coloré qui glisse de droite à gauche au survol via un dégradé CSS 200 % décalé — zéro JS, zéro pseudo-élément.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Navigation comprend 36 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose entièrement sur une propriété CSS : background. Un dégradé linéaire horizontal est déclaré sur 200 % de largeur (background-size: 200% 100%) — la moitié gauche est la couleur de remplissage (#6366f1), la moitié droite est transparente. Par défaut, background-position: right center n'expose que la moitié transparente ; l'élément semble sans fond.
Au survol, background-position passe à left center. La transition CSS de 0,4 s anime ce décalage : le pan coloré entre en scène depuis la gauche, créant l'illusion d'un remplissage progressif. Il n'y a aucune interpolation de couleur, aucun pseudo-élément ::before, aucun calcul JS — c'est un simple glissement de fond.
La couleur du texte est aussi animée par la même transition : elle passe de var(--text-secondary) (#a1a1aa) à #fff en synchronie avec le fond, maintenant la lisibilité WCAG AA (ratio ≈ 7,7:1 blanc sur indigo). L'arrondi border-radius: var(--radius-md) donne à chaque item la forme d'une capsule.
Le code est 100 % CSS, sans dépendance : aucun JavaScript, aucun pseudo-élément qui augmenterait la complexité du DOM. La classe link-bg-fill s'applique directement sur l'élément porteur, en complément de nav-link-demo qui gère l'espacement et la typographie de base.
Accessibilité
- Pas de guard prefers-reduced-motion : la transition de 0,4 s s'exécute quelle que soit la préférence système. Ajoutez manuellement
@media (prefers-reduced-motion: reduce) { .link-bg-fill { transition: none } }pour désactiver le glissement. - La démo utilise des
<span>(non focusables au clavier) — en production, remplacez par des<a href>ou<button>pour que l'effet s'active aussi au focus. CSS:hoverseul ne couvre pas:focus. - Pour afficher le remplissage au focus clavier, ajoutez
.link-bg-fill:focus-visible { background-position: left center; color: #fff; }. - Texte blanc
#fffsur fond#6366f1au survol : ratio de contraste ≈ 7,7:1 — WCAG AA ✔. - Texte
#a1a1aasur fond#0a0a0fà l'état normal : ratio ≈ 4,7:1 — WCAG AA ✔.
Compatibilité navigateur
Utilise uniquement background, background-position et transition — supportés dans tous les navigateurs modernes depuis 2015.
Sans support des transitions CSS, le fond bascule instantanément au survol — comportement encore fonctionnel, l'animation de glissement est simplement absente.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<nav class="nav-demo">
<a class="nav-link-demo link-bg-fill" href="#">Accueil</a>
<a class="nav-link-demo link-bg-fill" href="#">Services</a>
<a class="nav-link-demo link-bg-fill" href="#">Contact</a>
</nav>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| Couleur de remplissage | #6366f1 | Remplacez #6366f1 dans le dégradé par n'importe quelle couleur CSS. Les deux occurrences dans linear-gradient(90deg, #6366f1 50%, transparent 50%) doivent être identiques. |
| Durée de la transition | .4s | Modifiez transition: .4s sur .link-bg-fill. Valeur .2s pour une réaction vive, .6s pour un glissement cinématique. |
| Arrondi | var(--radius-md) = 0.5rem | Modifiez --radius-md ou mettez directement border-radius sur la classe. Utilisez 100px pour une forme pilule. |
| Padding interne | 0.5rem 1rem | Ajustez padding: var(--space-2) var(--space-4) — augmentez le padding horizontal pour une cible de clic plus large. |
| Couleur texte au repos | #a1a1aa | Modifiez --text-secondary selon votre fond. La transition l'anime automatiquement en même temps que le fond. |
| Couleur texte au survol | #fff | Modifiez color: #fff dans .link-bg-fill:hover. Utilisez une couleur sombre si votre fill est clair (ex. jaune pâle). |
| Espacement entre items | 2rem | Modifiez --space-8 dans le :root, ou le gap directement sur le conteneur .nav-demo. |
FAQ
class="nav-link-demo link-bg-fill" sur vos balises <a>. La transition fonctionne identiquement. Ajoutez text-decoration: none et déclarez .link-bg-fill:focus-visible { background-position: left center; color: #fff; } pour l'accessibilité clavier.active en JavaScript sur l'item courant et déclarez .link-bg-fill.active { background-position: left center; color: #fff; }. La transition s'applique à l'ajout et au retrait de classe sans code JS supplémentaire.:hover se déclenche généralement au premier tap (état persistant jusqu'au tap suivant). Pour un comportement plus prévisible, couplez aussi :active, ou gérez l'activation via une classe JS sur touchstart.
