Neon Border Pulse
Filet néon vert dont la lueur respire toutes les deux secondes, puis s'emballe et blanchit quand on survole, cible au clavier ou touche la boîte.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La boîte .nbp-box (200 × 120 px, arrondi 12 px) porte un filet plein de 2 px couleur #00ff88. Tout l'éclat vient de box-shadow : la règle empile plusieurs halos extérieurs flous et un halo intérieur (inset), sans aucun pseudo-élément ni JavaScript.
Au repos, l'animation nbpPulse (2 s, aller-retour adouci, en boucle) fait passer le halo de 5 px à trois couches de 15, 30 et 60 px, pendant que le filet glisse vers un vert d'eau #00ffcc. Au survol, l'animation est remplacée par nbpPulseIntense, deux fois plus rapide : le filet devient blanc au sommet de chaque battement et la lueur s'étale jusqu'à 120 px.
Le libellé est un vrai lien, .nbp-link, dont le pseudo-élément ::after recouvre toute la boîte : un clic n'importe où suit le lien. La boîte réagit à :hover et à :focus-within, donc aussi quand ce lien (ou tout autre lien, bouton ou champ placé dedans) reçoit le focus. Sans élément interactif à l'intérieur, la boîte reste un décor qui respire seul.
La teinte est donnée en trois nombres (--nbp-rgb: 0, 255, 136) parce que les halos la reprennent à différentes opacités avec rgba() : changer cette seule variable recolore le filet et toutes les lueurs.
Accessibilité
- Clavier : Tab atteint le lien de la boîte ; la pulsation intense démarre et un contour blanc (
--nbp-ring) entoure la boîte, à quelques pixels du filet, quand le focus vient du clavier. Dans Safari, Tab ne s'arrête sur les liens que si l'option clavier du navigateur est cochée (Option+Tab sinon) : réglage de Safari, pas de l'effet. - Toucher : un doigt posé sur le lien déclenche la pulsation intense dans Chromium, Firefox et WebKit (mesuré avec écran tactile simulé, y compris WebKit où une simple boîte sans lien ne réagit pas).
- Mouvement réduit : avec
prefers-reduced-motion: reduce, plus aucune respiration ; le filet garde une lueur fixe (10 et 30 px), et le survol ou le focus le passe en blanc avec un halo plus large, sans clignoter. - Rien que du décor : la lueur n'encode aucune information. Si elle signale un état (enregistrement en cours, case jouable), écrivez cet état en texte dans la boîte, comme « REC » dans l'exemple du studio.
- Clignotement : la version intense bat une fois par seconde, loin du seuil de trois éclairs par seconde des WCAG ; si vous raccourcissez
--nbp-speed-hover, restez au-dessus de 0,4 s.
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 sur une même page, survol, Tab, toucher, 390 px et mouvement réduit (plus aucune animation infinie). Versions minimales d'après @mdn/browser-compat-data : la propriété inset du lien étiré fixe le plancher (Chrome 87, Firefox 66, Safari 14.1).
Avant :focus-visible (Chrome 86, Firefox 85, Safari 15.4), le contour blanc n'apparaît pas, mais la pulsation intense démarre quand même au focus. Sans inset, écrivez top:0; right:0; bottom:0; left:0 sur .nbp-link::after.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0767-root">
<div class="nbp-box">
<a class="nbp-link" href="#neon-pulse">Neon Pulse</a>
</div>
</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 |
|---|---|---|
--nbp-rgb |
0, 255, 136 |
Couleur du néon en trois nombres R, G, B : filet et halos changent ensemble. |
--nbp-peak et --nbp-hot |
#0fc et #fff |
Teinte du filet au sommet d'une respiration, puis au sommet d'une pulsation intense. |
--nbp-speed |
2s |
Durée d'une respiration au repos. |
--nbp-speed-hover |
1s |
Durée d'un battement au survol, au focus et au toucher. |
--nbp-w, --nbp-h, --nbp-radius |
200px, 120px, 12px |
Taille et arrondi de la boîte ; la largeur ne dépasse jamais celle du conteneur. |
--nbp-fill |
#0a0a0f |
Fond de la boîte. Le néon ressort sur un fond sombre ; sur fond clair, les halos verts deviennent presque invisibles. |
--nbp-ring |
#fff |
Couleur du contour de focus clavier. |
FAQ
.nbp-link et donnez-lui votre adresse ; mettez le reste du contenu (titre, texte) dans la boîte à côté de lui. Son ::after couvre toute la boîte, donc tout le cadre est cliquable, et le focus clavier sur ce lien allume la pulsation. Pour un cadre purement décoratif, supprimez le lien : la respiration continue, sans curseur de main.box-shadow oblige le navigateur à repeindre le halo à chaque image. Pour un ou quelques cadres, c'est sans conséquence ; pour une grille de dizaines de boîtes qui pulsent en même temps, préférez réserver le néon aux éléments qui comptent, comme les trois cases jouables de l'exemple.--nbp-rgb (par exemple 255, 64, 96 pour un rouge, 56, 189, 248 pour un bleu ciel) et accordez --nbp-peak à une version plus claire de la même teinte. Le blanc de --nbp-hot va avec toutes les couleurs.
