Choisissez votre formule
HoverGratuit
Background Slide
Un dégradé à deux couleurs occupe 200 % de largeur et glisse de gauche à droite en 0,5 s au survol — animation de position, pure CSS sans pseudo-élément.
Mis à jour le
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Hover en contient 48 au total, dont 5 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
🍽 Collège Lucie Aubrac
Mardi 12 novembre
Choisissez votre niveau
S'adapte à vos connaissances actuelles
Comment ça marche
La racine .fx-0344-root centre un bouton de 200 px de côté. Le fond est un dégradé linéaire horizontal qui juxtapose la couleur de repos (--bg-card) et l'indigo (#6366f1), chacun sur 50 % de large, pour une largeur totale de 200 %. Au repos, background-position: left affiche la partie sombre. Au survol, background-position: right décale le dégradé d'une largeur complète vers la gauche, révélant l'indigo en 0,5 s avec transition: all 0.5s ease. Aucun pseudo-élément, aucune nouvelle couche — c'est le fond lui-même qui se déplace.
Au survol, color: white force le texte en blanc pour rester lisible sur l'indigo ; :focus-visible déclenche le même état. La technique est compatible avec toute forme de fond (couleur unie, dégradé avec plus de stops) et toute taille d'élément — il suffit d'ajuster background-size: 200% 100%. Sous mouvement réduit, l'animation est supprimée mais l'état de couleur change instantanément (retour d'état garanti).
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est neutralisée. L'état de couleur change instantanément au survol et au focus — l'indigo apparaît d'un coup, sans glissement. - Clavier : l'élément est un
<button>nativement focusable. La règle:focus-visibledéclenche le même fond indigo que le survol, avec un contour de 2 px pour signaler le focus clavier. - Contraste : l'indigo sur fond blanc d'un site en thème clair peut être insuffisant selon la couleur choisie — vérifiez le ratio WCAG (≥ 4.5:1 en texte normal). Sur fond sombre, le contraste est mesuré suffisant.
- Toucher : le tap active le survol CSS sur la plupart des navigateurs mobiles. Le fond reste indigo jusqu'à ce que le focus passe ailleurs.
Compatibilité navigateur
Pure CSS, aucune dépendance. Propriétés : background avec dégradé, background-size, background-position, transition, :focus-visible. Vérifié dans Chromium et Firefox : glissement visible, deux copies indépendantes, 0 erreur JS. :focus-visible nécessite Chrome 86+, Firefox 85+, Safari 15.4+.
Chrome 86+✓ Complet (mesuré)
Firefox 85+✓ Complet (mesuré)
Safari 15.4+✓ Complet (:focus-visible)
Edge 86+✓ Complet (moteur Chromium)
Mobile iOS 15.4+✓ Complet
Android Chrome 86+✓ Complet (mesuré)
Sans :focus-visible (avant 2021), le focus clavier n'active pas l'animation. L'élément reste utilisable au clavier, sans retour visuel d'animation.
Le code
Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.
HTML
<div class="fx-0344-root">
<button class="hover-box hover-bg-slide" type="button">
<span>BG Slide</span>
</button>
</div>
CSS
.fx-0344-root,
.fx-0344-root *,
.fx-0344-root *::before,
.fx-0344-root *::after {
box-sizing: border-box
}
.fx-0344-root {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
/* Variables du design system du site, dont ce code dépend (valeurs de css/style.css — à adapter librement). */
.fx-0344-root {
--bg-card: #12121a;
--border: rgba(255, 255, 255, 0.08);
--radius-xl: 1rem;
}
.fx-0344-root .hover-box {
width: 200px;
height: 200px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
cursor: pointer;
position: relative;
overflow: hidden;
font: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
}
.fx-0344-root .hover-bg-slide {
background: linear-gradient(90deg, var(--bg-card) 50%, #6366f1 50%);
background-size: 200% 100%;
background-position: left;
transition: all 0.5s ease;
}
.fx-0344-root .hover-bg-slide:hover {
background-position: right;
color: white;
}
.fx-0344-root .hover-bg-slide:focus-visible {
background-position: right;
color: white;
outline: 2px solid #6366f1;
outline-offset: 3px;
}
.fx-0344-root .hover-box span {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.fx-0344-root * {
transition: none !important;
animation-play-state: paused !important;
}
}
JavaScript
CSS pur — aucun JavaScript requis.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleur de survol (CSS — #6366f1) |
indigo | Remplacez par la couleur primaire de votre charte. Pour un dégradé sur la partie indigo, remplacez #6366f1 par linear-gradient(90deg, #6366f1, #d946ef) dans la définition du fond. |
Direction (CSS — gradient(90deg, …)) |
gauche → droite | 180deg donne un remplissage bas vers le haut (effet 'Fill Up') ; 270deg droite vers gauche. |
Durée (CSS — 0.5s ease) |
0,5 s | 0,25 s est plus vif ; 0,8 s plus lent. ease-in-out rend l'animation légèrement plus douce aux extrémités. |
Proportion de chaque couleur (CSS — 50%) |
50 / 50 | Passer à 60% réduit la zone indigo et conserve plus de couleur de repos dans le dégradé. |
Couleur du texte au survol (CSS — color: white) |
blanc | Adaptez pour maintenir le contraste WCAG (≥ 4.5:1) selon la couleur d'arrivée choisie. |
FAQ
Comment faire glisser le fond de droite à gauche ?
Échangez les deux couleurs dans le dégradé et mettez background-position: right au repos et left au survol.
Peut-on utiliser un dégradé à trois couleurs ?
Oui. Définissez par exemple linear-gradient(90deg, #12121a 0%, #6366f1 50%, #d946ef 100%) sur 300 % de large avec background-position de 0% 0% à 100% 0%. Ajustez les positions de stop pour l'effet voulu.
Le fond clignote brièvement lors du tap sur iOS. Comment l'éviter ?
Ajoutez -webkit-tap-highlight-color: transparent sur l'élément. Ce style supprime la surbrillance de tap propre à WebKit sans désactiver les autres retours d'état.
