Color Shift
Le fond passe d'indigo à violet et l'élément remonte légèrement (translateY -5 px) au survol en 0,5 s — transition color + transform, pure CSS.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0349-root centre un bouton de 200 px. Au repos, le fond est indigo (#6366f1). Au survol, background: #d946ef (violet-rose) et transform: translateY(-5px) s'appliquent simultanément en 0,5 s. La transition porte sur background-color, color et transform. Le changement de fond (indigo → violet) est l'effet principal ; le léger glissement vers le haut renforce l'impression de survol sans déplacer fortement l'élément dans la mise en page.
Aucun pseudo-élément, aucun dégradé sur l'animation — c'est la propriété background-color elle-même qui s'anime d'une couleur à l'autre. :focus-visible déclenche le même état. Sous mouvement réduit, la transition est supprimée (changement instantané) et le translateY est neutralisé, ne laissant que le changement de couleur visible.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, toutes les transitions sont désactivées et letransformest neutralisé au survol. Le changement de couleur (indigo → violet) reste actif instantanément — retour d'état garanti. - Clavier : l'élément est un
<button>nativement focusable.:focus-visibledéclenche le changement de couleur et le glissement, avec un contour blanc de 2 px pour le focus clavier. - Contraste : le violet-rose (
#d946ef) sur fond blanc peut être insuffisant (ratio < 3:1). Vérifiez avec un outil de contraste WCAG si votre charte change les couleurs. - Toucher : le tap active le survol CSS sur la plupart des navigateurs mobiles. L'effet se dissipe au prochain changement de focus.
Compatibilité navigateur
Pure CSS. Propriétés : background-color, color, transform: translateY, transition, :focus-visible. Vérifié dans Chromium et Firefox : changement de couleur et glissement visibles, deux copies indépendantes, 0 erreur.
Sans :focus-visible (avant 2021), le focus clavier ne déclenche pas le changement de couleur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0349-root">
<button class="csh-box csh-shift" type="button">
<span>Votre texte</span>
</button>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Couleur de repos (CSS — background: #6366f1) |
indigo | Remplacez par la couleur primaire de votre charte. Assurez-vous que le texte blanc est lisible (ratio WCAG ≥ 4.5:1). |
Couleur de survol (CSS — background: #d946ef) |
violet-rose | Choisissez une couleur contrastée avec le texte au survol. Pour un effet plus discret, optez pour un ton légèrement plus foncé de la couleur de repos. |
Décalage vertical (CSS — translateY(-5px)) |
-5 px | 0 supprime le glissement et ne laisse que le changement de couleur. -10 px est plus prononcé mais peut désaligner visuellement dans une grille serrée. |
Durée (CSS — 0.5s) |
0,5 s | 0,2 s est plus réactif ; 0,8 s donne une transition plus douce. |
Transition ciblée (CSS — background-color 0.5s, color 0.5s, transform 0.5s) |
3 propriétés | Retirez transform 0.5s pour désactiver le glissement tout en conservant l'animation de couleur. |
FAQ
transform: translateY(-5px) de la règle :hover/:focus-visible et retirez transform 0.5s de la transition. Ne conservez que background-color 0.5s, color 0.5s.background-image (gradient). Deux approches : un pseudo-élément ::before avec le dégradé à opacity: 0 que vous passez à 1 au survol ; ou background-size: 200% avec animation de position (voir fx-0344).translateY ne modifie pas le flux du document — l'espace occupé reste identique. Si l'élément chevauche visuellement un voisin, ajoutez z-index: 1 sur l'état :hover/:focus-visible et isolation: isolate sur le parent.
