Chrome Reflection
Bouton pilule en métal poli : au survol ou au focus, un reflet blanc oblique traverse sa moitié haute, puis repasse en sens inverse quand on le quitte.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Distorsion comprend 31 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bouton .chm-btn est un vrai <button>. Son aspect chromé vient d'un dégradé vertical blanc, gris clair, gris moyen au centre, puis gris clair et blanc, complété par trois ombres : une ombre portée sous le bouton, un filet clair en haut et un filet sombre en bas, à l'intérieur. Une couleur unie #d4d4d4 est déclarée sous le dégradé, au cas où il ne s'afficherait pas.
Le reflet est le pseudo-élément ::before : une bande de la largeur du bouton et de la moitié de sa hauteur, en dégradé transparent, blanc à 80 %, transparent, inclinée de 25°. Il attend hors du bouton, à gauche (left: -100%). Au survol ou au focus, il part à left: 200% en 0,5 s (--chm-speed) : on le voit balayer le haut du bouton une fois.
C'est une transition, pas une boucle : quand le survol ou le focus cesse, le reflet refait le chemin de droite à gauche. Tant que la souris reste dessus, rien ne bouge. Le débordement est coupé par overflow: hidden.
Accessibilité
- Vrai bouton :
<button type="button">avec son texte réel, activable à Entrée et Espace, annoncé comme bouton par les lecteurs d'écran. - Clavier : le focus déclenche le même passage du reflet que le survol, et un contour (
--chm-ring) apparaît quand le focus vient du clavier. Dans Safari, la touche Tab ne s'arrête pas sur les boutons tant que l'option « Appuyer sur Tab pour sélectionner chaque élément » n'est pas cochée (mesuré dans WebKit) ; c'est un réglage du navigateur, pas de l'effet. - Toucher : toucher le bouton déclenche le passage du reflet (mesuré dans Chromium, Firefox et WebKit avec écran tactile simulé).
- Mouvement réduit : avec
prefers-reduced-motion: reduce, le reflet ne glisse plus ; au survol ou au focus, il s'affiche immobile sur la moitié haute du bouton, à 55 % d'opacité. - Contraste : le texte
#1a1a1atombe au milieu du bouton, là où le métal est le plus sombre (#737373) : le rapport y est de 3,7:1. C'est suffisant pour le texte gras de 1,25rem fourni (grand texte au sens des WCAG, seuil 3:1), pas pour un texte plus petit : gardez au moins 18,7 px en gras, ou modifiez le dégradé pour éclaircir son centre.
Compatibilité navigateur
CSS seul, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et le WebKit 26.5 de Playwright : 0 erreur, deux copies indépendantes, survol, focus, toucher, 390 px et mouvement réduit. Le vérificateur copier-coller ne signale plus de « texte invisible » depuis l'ajout de la couleur de secours. Versions minimales d'après @mdn/browser-compat-data : les variables CSS fixent le plancher (Chrome 49, Firefox 31, Safari 9.1).
Sans :focus-visible (avant Safari 15.4 et Chrome 86), le contour de focus ne s'affiche pas ; le reflet, lui, passe toujours au focus.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0264-root"><button class="chm-btn" type="button">CHROME</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 |
|---|---|---|
--chm-pad |
20px 50px |
Marges intérieures du bouton (hauteur puis largeur). |
--chm-font |
1.25rem |
Taille du texte. |
--chm-radius |
50px |
Arrondi des coins : 50px donne une pilule, 12px un bouton rectangulaire. |
--chm-speed |
.5s |
Durée d'un passage du reflet, à l'aller comme au retour. |
--chm-text |
#1a1a1a |
Couleur du texte ; restez sur une teinte très sombre pour garder le contraste sur le métal. |
--chm-ring |
#e5e5e5 |
Couleur du contour au focus clavier. |
--chm-bg et --chm-min-h |
#0a0a0f et 300px |
Fond et hauteur minimale de la racine ; transparent et 0 pour placer le bouton dans votre page. |
FAQ
.chm-btn a son propre reflet. La racine est un conteneur flex centré ; changez sa disposition (grille, colonne) dans votre CSS si besoin.left revient à sa valeur de départ, avec la même durée. Pour un seul passage, ajoutez transition: none sur .chm-btn::before hors survol et gardez la transition dans la règle :hover.chm-btn fonctionne sur un <a href>, puisque le reflet suit aussi :hover et :focus. Ajoutez display: inline-block et text-decoration: none au lien.
