Neon Glow
Contour et texte vert néon (#00ff88) avec un halo de 10 px au repos ; au survol le bouton se remplit de ce vert, le texte passe au noir et deux ombres de 30 et 60 px l'entourent — 300 ms, CSS seul, pas de pulsation.
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. Boutons comprend 27 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au repos, .btn-neon est un bouton creux : background: transparent, border: 2px solid #0f8, color: #0f8 (soit #00ff88) et un text-shadow: 0 0 10px #0f8 qui fait luire les lettres. La bordure remplace le border-style: none posé par .demo-btn. Aucun box-shadow au repos : le tube est éteint, seul le texte luit.
Au :hover, quatre propriétés changent ensemble : background devient #0f8, color devient #0a0a0f, text-shadow passe à none et box-shadow ajoute deux halos 0 0 30px #0f8, 0 0 60px #0f8. Le second s'étend à 60 px autour du bouton : prévoyez l'espace, et sachez qu'un parent en overflow: hidden le coupera net.
transition: .3s (toutes propriétés, courbe ease) interpole les quatre changements. Un détail mesurable : le texte va du vert au noir pendant que le fond va du noir au vert, à la même vitesse — à mi-course (≈ 120 ms avec ease), texte et fond ont exactement la même couleur #05844b et le libellé disparaît quelques images avant de réapparaître en noir. Voir la FAQ pour l'éviter.
Il n'y a ni :active ni @keyframes sur .btn-neon : mesuré dans Chromium, aucune animation ne tourne au repos, le bouton est immobile tant qu'on ne le survole pas. Contrairement à ce que « Neon Glow » peut suggérer, la lueur ne pulse pas — c'est la variante Neon Pulse du catalogue qui anime le halo en continu.
Accessibilité
- Contraste :
#0f8sur#0a0a0f= 14,7:1 au repos, et#0a0a0fsur#0f8= 14,7:1 au survol — niveau AAA dans les deux états. Le point faible est la transition : à mi-course le texte et le fond se confondent (1:1) pendant une soixantaine de millisecondes. Donnez au texte une transition plus courte que le fond (transition: background .3s, color .12s, box-shadow .3s, text-shadow .3s) pour qu'il bascule avant que le fond ne le rattrape. - Fond sombre obligatoire : sur une page claire,
#0f8sur blanc ne contraste qu'à 1,3:1 — le texte au repos est illisible. L'effet est conçu pour un fond proche de#0a0a0f; la couleur de texte au survol (#0a0a0f) est d'ailleurs celle du fond du catalogue. - prefers-reduced-motion : le seul mouvement est une transition de couleurs et d'ombres de 300 ms, sans déplacement — acceptable pour la plupart des personnes sensibles au mouvement ;
transition: nonesous la media query ne coûte rien. - Focus : la bordure de 2 px est celle de l'effet,
outlinen'est pas touché — l'anneau de focus natif reste visible, mais il est de la même famille de couleur que le tube sur Chrome (bleu) et se lit mal sur le vert plein au survol. Déclarez.btn-neon:focus-visible { outline: 2px solid #fff; outline-offset: 3px }. - Tactile : pas de
:hoverau doigt ; sur iOS l'état survolé (bouton plein) reste collé après un tap jusqu'au toucher suivant — enveloppez la règle de survol dans@media (hover: hover). Cible ≈ 54 px de haut, au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert les transitions CSS sur background-color, color, box-shadow et text-shadow, et les ombres multiples — tous les navigateurs depuis 2012. Aucun JavaScript, zéro dépendance.
Sans transitions, le bouton bascule instantanément du contour au plein : l'effet reste lisible, seul le fondu de 300 ms disparaît. Sans box-shadow, le texte luit toujours au repos grâce au text-shadow.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
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 du néon #0f8 (CSS — 6 occurrences : color, border, text-shadow, hover background, hover box-shadow ×2) | #0f8 (#00ff88) | Teinte du tube. À changer aux six endroits, ou réduisez-les à un seul avec currentColor (voir FAQ). Gardez une couleur saturée et claire : le halo est la couleur elle-même, floutée. |
| text-shadow (CSS — .btn-neon) | 0 0 10px #0f8 | Lueur des lettres au repos. 0 0 4px = tube net ; 0 0 18px = lettres brumeuses, moins lisibles. |
| box-shadow (CSS — :hover) | 0 0 30px, 0 0 60px | Halo du bouton allumé. Le second rayon fixe l'emprise : 60 px autour du bouton. Réduisez à 16px / 32px dans une carte, augmentez à 40px / 80px dans un hero. |
| color (CSS — :hover) | #0a0a0f | Couleur du texte sur le bouton plein. C'est le fond du catalogue ; alignez-la sur votre propre fond de page pour que le texte semble « découpé » dans le tube. |
| transition (CSS — .btn-neon) | .3s (toutes propriétés) | Durée de l'allumage. .15s = interrupteur ; .5s = tube qui chauffe. Séparez les propriétés pour éviter la disparition du texte à mi-course. |
| border (CSS — .btn-neon) | 2px solid #0f8 | Épaisseur du tube. 1px = filament fin ; 3px = enseigne épaisse. La bordure fait partie de la hauteur du bouton (54 px avec 2 px). |
| Fond de page (contexte — hors CSS de l'effet) | #0a0a0f | L'effet suppose un fond sombre : sur du clair, le texte vert au repos tombe à 1,3:1 et le halo devient un liseré pâle. Pour un thème clair, passez à une teinte foncée (#047857) et abandonnez le text-shadow. |
FAQ
#0f8 à #0a0a0f, le fond de #0a0a0f à #0f8. À mi-course ils valent tous deux #05844b et le texte est invisible pendant quelques images. Remède : transition: background .3s, color .1s, box-shadow .3s, text-shadow .3s — le texte devient noir avant que le fond n'ait quitté le sombre — ou gardez un text-shadow au survol pour conserver un contour lisible.color et réutilisez currentColor : .btn-neon { color: #0f8; border-color: currentColor; text-shadow: 0 0 10px currentColor }. Pour le survol, où color devient sombre, passez par une variable : .btn-neon { --neon: #0f8 } puis background: var(--neon); box-shadow: 0 0 30px var(--neon), 0 0 60px var(--neon). Une seule déclaration change tout le tube.overflow: hidden (carte, colonne, conteneur de carrousel) et rogne le box-shadow de 60 px, qui déborde du bouton par définition. Trois options : réserver 60 px de marge intérieure au conteneur, réduire les rayons à 16px / 32px, ou passer le conteneur en overflow: visible. Le overflow: hidden du bouton lui-même n'est pas en cause : un élément ne rogne jamais sa propre ombre.
