Neon Pulse
Un halo cyan qui respire en continu : trois ombres de 5, 10 et 20 px au repos, quatre ombres de 10, 20, 40 et 80 px au milieu d'un cycle de 2 s, courbe ease-in-out — sans survol, sans JavaScript. Il pulse vraiment.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 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
.btn-neon-pulse est un bouton contour : fond transparent, texte et border: 2px solid en cyan pur #0ff, text-shadow: 0 0 10px #0ff fixe, et animation: neonPulse 2s ease-in-out infinite (le code livré l'écrit en forme longue, 2s ease-in-out 0s infinite normal none running neonPulse — même chose). Aucune règle :hover ni :active : l'animation est tout l'effet, et elle ne s'interrompt pas quand on interagit.
Les images clés animent box-shadow. À 0 % et 100 % (to) : trois ombres 0 0 5px, 0 0 10px, 0 0 20px ; à 50 % : quatre ombres 0 0 10px, 0 0 20px, 0 0 40px, 0 0 80px. Les listes n'ont pas la même longueur : le navigateur complète la plus courte par une ombre nulle et transparente, si bien que la quatrième couche apparaît en fondu pendant que son flou grandit de 0 à 80 px. Mesuré dans Chromium : à ≈ 250 ms de la montée, flous de 8, 16, 32 px et une 4ᵉ ombre à 49 px d'opacité 0,62 ; à ≈ 760 ms, 9,9 / 19,9 / 39,8 px et 79 px à 0,99. Le halo double de rayon et gagne une nappe de 80 px, puis redescend : il pulse.
ease-in-out s'applique à chaque moitié : le halo gonfle pendant 1 s, se rétracte pendant 1 s, en ralentissant aux deux extrêmes — une respiration à 0,5 Hz, pas un clignotement. Le text-shadow de 10 px ne participe pas : seul le halo de la boîte varie, le texte garde une lueur constante.
Rendu et coût : un box-shadow avec 80 px de flou est repeint à chaque image, sur le thread principal — pas composé par le GPU comme opacity ou transform. Sans conséquence pour un ou deux boutons, sensible sur une grille (voir FAQ). Le overflow: hidden hérité de .demo-btn ne rogne pas l'ombre du bouton lui-même — il ne découpe que ses descendants — ; le halo s'étend donc jusqu'à ≈ 80 px hors du bouton : prévoyez la place, et un parent sans overflow: hidden.
Accessibilité
- Contraste :
#0ffsur#0a0a0f= 15,8:1 pour le texte comme pour la bordure (AAA, et bien au-delà des 3:1 exigés pour un contour). Mais le fond est transparent et le cyan pur ne tient que sur du sombre : 8,3:1 sur#334155, 1,25:1 sur blanc — illisible. Sur page claire,#0e7490pour le texte et la bordure (5,4:1) ; le halo cyan devient alors un accessoire, l'effet néon suppose l'obscurité. - prefers-reduced-motion absent du code — et l'animation tourne en boucle. Ajoutez
@media (prefers-reduced-motion: reduce) { .btn-neon-pulse { animation: none; box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff } }. Lebox-shadowexplicite est indispensable : la règle de base n'en déclare aucun, etanimation: noneseul fait disparaître tout le halo. - WCAG 2.2.2 (Pause, Stop, Hide) : un mouvement qui démarre seul et dure plus de 5 s doit pouvoir être arrêté — la pulsation est infinie. Prévoyez un mécanisme de pause (
animation-play-state: pausedvia une classe ou au survol) ou limitez le nombre d'itérations. À 0,5 Hz on est loin du seuil de 3 Hz du critère 2.3.1 (flashs), mais une lueur qui respire en permanence reste une source de distraction pour les troubles de l'attention. - Focus : le code ne touche pas
outline, mais l'anneau natif se noie dans un halo cyan de 20 à 80 px. Déclarez.btn-neon-pulse:focus-visible { outline: 2px solid #fff; outline-offset: 4px }pour un indicateur qui se distingue du néon. - Lecteurs d'écran : rien de généré, aucun changement de nom ;
<button>natif. Tactile : l'animation ne dépend pas du survol, l'effet est identique sur mobile — au prix d'un repaint permanent, donc de batterie. Cible 54 px de haut (16 + 18 + 16 + 2 × 2), au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert @keyframes, les ombres multiples et l'interpolation de box-shadow entre deux listes de longueurs différentes — tous les navigateurs depuis 2012 ; les plus anciens sautent d'une liste à l'autre sans fondu. Aucun JavaScript, zéro dépendance.
Sans animations CSS, le halo n'existe pas : la règle de base ne déclare aucun box-shadow. Le bouton garde sa bordure et la lueur fixe de son texte — lisible, mais sans néon.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<button class="demo-btn btn-neon-pulse">Neon Pulse</button>Le code complet HTML + CSS + JS de Neon Pulse, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| 2s (CSS — animation-duration) | 2s | Un cycle complet (montée + descente). 1.2s : nerveux ; 3s : respiration lente. Sous 0,7 s on approche d'un clignotement. |
| #0ff (CSS — color, border, text-shadow, et les 7 ombres des keyframes) | #0ff × 10 | La couleur est répétée dix fois, dont sept dans @keyframes neonPulse : une seconde couleur sur la même page demande une seconde @keyframes. Pour un rose néon : #ff00ff (6,3:1 sur #0a0a0f) ; pour un vert : #22c55e (8,7:1). |
| Rayons 5 / 10 / 20 px → 10 / 20 / 40 / 80 px (CSS — keyframes 0 % et 50 %) | ×2 + une nappe de 80 px | Amplitude de la pulsation. Retirez la 4ᵉ ombre pour un halo qui double sans nappe ; montez-la à 120px pour une lueur qui éclaire la carte entière. |
| ease-in-out (CSS — animation-timing-function) | ease-in-out | linear : mécanique ; steps(2, jump-none) : clignotement franc entre les deux états — déconseillé (2.3.1). |
| animation-play-state (CSS — à ajouter) | running | .btn-neon-pulse:hover { animation-play-state: paused } fige le halo à l'image courante quand on vise le bouton ; via une classe .is-paused, c'est le bouton de pause qu'exige WCAG 2.2.2. |
| background: 0 0 (CSS — .btn-neon-pulse) | transparent | #0a0a0f : une face opaque, nette au centre du halo, qui garde le contraste du texte quel que soit ce qu'il y a derrière. rgba(0,255,255,.06) : légère teinte de verre. |
| text-shadow: 0 0 10px #0ff (CSS — .btn-neon-pulse) | fixe, 10 px | Ajoutez-le aux deux images clés (10px → 18px) pour que les lettres respirent avec le halo ; retirez-le pour un texte net sur halo flou. |
FAQ
box-shadow par un ::before qui porte les quatre ombres maximales et dont vous animez opacity de .3 à 1 : même respiration, en couche composée, quasi gratuite..btn-neon-pulse:hover { animation-play-state: paused }. Après un nombre de cycles : animation-iteration-count: 3 — mais la règle de base n'ayant pas de box-shadow, le halo disparaît d'un coup à la fin ; ajoutez box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff à .btn-neon-pulse pour qu'il reste à l'état de repos.overflow: hidden (carte, colonne, conteneur de grille) : il découpe l'ombre du bouton, qui déborde jusqu'à 80 px. Le overflow: hidden du bouton lui-même n'y est pour rien — il ne concerne que ses enfants. Laissez 80 px de marge intérieure au parent, passez-le en overflow: visible, ou réduisez la plus grande ombre à 40px.
