Shine Effect
Un reflet blanc translucide traverse l'élément de gauche à droite en 0,5 s au survol — une seule passe, pseudo-élément ::before, 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-0346-root centre un bouton de 200 px. Un pseudo-élément ::before de même taille que l'élément porte un dégradé linéaire horizontal : transparent → rgba(255,255,255,0.2) → transparent, soit un reflet blanc étroit au centre. Au repos, il est positionné à left: -100% (hors de vue à gauche). Au survol, left: 100% le déplace hors de vue à droite. transition: left 0.5s anime ce déplacement : le reflet traverse l'élément une seule fois en diagonale douce, sans boucle.
overflow: hidden sur l'élément masque le reflet quand il sort des bords. La seule passe au survol (pas de boucle @keyframes) est volontaire : le reflet ne doit pas s'animer en permanence pour ne pas distraire. Sous mouvement réduit, le déplacement est supprimé et le pseudo-élément reste à left: -100% (caché). La règle :focus-visible déclenche le même transit qu'au survol.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est désactivée et le pseudo-élément reste caché (left: -100%) même au survol. Aucun mouvement, aucun reflet. L'élément garde son apparence au repos. - Clavier : l'élément est un
<button>nativement focusable.:focus-visibledéclenche le reflet et ajoute un contour indigo de 2 px. Le reflet en translation peut être subtil : le contour sert de signal principal pour les utilisateurs clavier. - Toucher : sur écran tactile, le tap peut ne pas déclencher la transition
:hoversur tous les navigateurs. L'effet est un enrichissement visuel — l'interaction fonctionnelle n'en dépend pas. - Rôle décoratif : le reflet est purement cosmétique. Aucune information n'est portée par le mouvement du pseudo-élément. L'élément reste lisible et utilisable sans l'effet.
Compatibilité navigateur
Pure CSS. Propriétés : ::before, left (transition), overflow: hidden, :focus-visible. Vérifié dans Chromium et Firefox : reflet visible, deux copies indépendantes, 0 erreur. Le déplacement left déclenche un repaint — pour de meilleures performances, remplacez par transform: translateX (voir FAQ).
Sans :focus-visible (avant 2021), le focus clavier déclenche le reflet via :focus uniquement si le navigateur le supporte — l'effet peut apparaître aussi au clic sur certains navigateurs.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0346-root">
<button class="shn-box shn-shine" 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 |
|---|---|---|
Intensité du reflet (CSS — rgba(255,255,255,0.2)) |
20 % blanc | 0.1 est quasi invisible ; 0.4 est très brillant. Sur fond clair, réduisez plutôt l'opacité ou utilisez une couleur différente du blanc pur. |
Durée (CSS — 0.5s) |
0,5 s | 0,25 s crée un éclair rapide ; 0,8 s un balayage lent. |
Largeur du reflet (CSS — width: 100% sur ::before) |
100 % de l'élément | Réduire à 50 % crée un reflet plus étroit et plus visible. Ajustez le dégradé pour garder le pic de blanc au centre. |
Performances (remplacement de left par transform) |
transition left (repaint) | Remplacez left: -100%/100% par transform: translateX(-200%)/translateX(200%) sur ::before pour utiliser la couche du compositeur et éviter le repaint — surtout utile si plusieurs éléments sont animés simultanément. |
Répétition (ajouter un @keyframes en boucle) |
une seule passe au survol | Pour un reflet continu, remplacez la transition par animation: shn-loop 2s linear infinite avec un keyframes qui anime left de -100 % à 100 %. Activez l'animation au survol et désactivez-la à la sortie. |
FAQ
left: -100% → 100% se termine hors de vue. Pour plusieurs passes, utilisez un @keyframes sur translateX avec iteration-count: 2 ou infinite, déclenché au :hover.overflow: hidden sur l'élément masque le reflet dès qu'il sort de ses bords. Retirez cette propriété si vous voulez que le reflet déborde (par exemple sur une image sans cadre strict).::before : background: linear-gradient(60deg, transparent, rgba(255,255,255,0.2), transparent) et augmentez la largeur du pseudo-élément à 150 % ou 200 % pour que le reflet traverse entièrement.
