Glow Pulse
Un halo indigo qui respire en boucle (20 → 40 px toutes les 2 s) et se fige, plus large, au survol — pour désigner l'action à faire maintenant.
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
@keyframes glowPulse n'anime qu'une propriété : box-shadow. À 0 % et 100 %, 0 0 20px rgba(99,102,241,.4) ; à 50 %, 0 0 40px rgba(99,102,241,.8) — le rayon de flou et l'opacité doublent à mi-cycle. La couleur du halo est celle du fond du bouton (#6366f1) : il se lit comme une lumière émise par le bouton, pas comme une ombre.
.btn-glow l'applique avec animation: glowPulse 2s ease-in-out infinite (le code livré l'écrit sous sa forme sérialisée, 2s ease-in-out 0s infinite normal none running glowPulse — c'est la même déclaration). ease-in-out dans les deux sens donne une respiration symétrique, sans à-coup aux extrêmes. L'animation démarre au chargement, sans déclencheur.
Au :hover, animation: none (sérialisé auto ease 0s 1 normal none running none) retire la boucle et un box-shadow: 0 0 50px #6366f1 statique, opaque et plus large, la remplace. Aucune transition n'est déclarée sur box-shadow : le passage est instantané, le halo saute à 50 px ; au départ du curseur, l'animation redémarre à son 0 % (20 px), tout aussi instantanément.
Coût de rendu : box-shadow n'est pas une propriété composée par le GPU — chaque image repeint la zone du bouton élargie du flou (jusqu'à 40 px autour). Sans conséquence pour un ou deux CTA ; au-delà, déportez l'ombre sur un pseudo-élément et animez son opacity (voir la FAQ).
Accessibilité
- prefers-reduced-motion absent du code : le pouls tourne indéfiniment pour tout le monde. Ajoutez
@media (prefers-reduced-motion: reduce) { .btn-glow { animation: none; box-shadow: 0 0 20px rgba(99,102,241,.4) } }— le halo reste, fixe, et la mise en avant est conservée. - Contraste : texte blanc sur
#6366f1= 4,47:1, juste sous le seuil AA de 4,5:1 pour un texte de 16 px.#4f46e5donne 6,3:1 — changez le fond et les deux couleurs d'ombre ensemble pour que le halo reste celui du bouton. - Le halo porte un sens (« c'est l'action à faire ») qui n'existe que visuellement : un lecteur d'écran entend un bouton ordinaire. Si cette hiérarchie compte (prochaine étape d'un parcours), dites-le dans le libellé (« Étape 3 : connecter le paiement ») ou via
aria-describedby. - Le code écrit
border: nonesans toucher àoutline: l'anneau de focus natif reste. Sur fond sombre, il peut se confondre avec le halo qui pulse — déclarez.btn-glow:focus-visible { outline: 2px solid #fff; outline-offset: 3px }pour le distinguer. - Pulsation à 0,5 Hz, très en dessous du seuil de trois éclairs par seconde (WCAG 2.3.1). Réservez-la à un seul élément par écran : plusieurs boutons qui pulsent s'annulent et ajoutent du bruit visuel. Cible tactile ≈ 52 px de haut, au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert une animation CSS @keyframes sur box-shadow — supportée partout depuis 2012. Aucun JavaScript, zéro dépendance.
Sans support des animations CSS, le bouton s'affiche avec son fond indigo et sans halo au repos ; le halo de 50 px au survol reste, c'est un simple box-shadow.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<button class="demo-btn btn-glow">Glow Pulse</button>Le code complet HTML + CSS + JS de Glow 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 |
|---|---|---|
| animation-duration (CSS — .btn-glow) | 2s | Durée d'un cycle complet (gonfle puis dégonfle). 1s = alerte ; 3–4s = respiration lente. |
| Rayons 20px / 40px (CSS — @keyframes glowPulse) | 20px → 40px | Étalement du halo au repos et au pic. Gardez un rapport proche de 2 pour que la pulsation se voie ; au-delà de 60 px le halo devient un fond coloré. |
| Opacités .4 / .8 (CSS — @keyframes glowPulse) | .4 → .8 | Intensité mini et maxi. Descendez à .2 → .5 sur fond clair, où un halo coloré se voit moins. |
Couleur du halo (CSS — rgba(99,102,241,…) ×2 + #6366f1 au survol) |
indigo #6366f1 | Trois occurrences à changer avec le background. Le halo doit garder la couleur du bouton pour se lire comme une émission de lumière. |
| box-shadow au survol (CSS — .btn-glow:hover) | 0 0 50px #6366f1 | État figé au survol. 30px pour un simple arrêt du pouls ; ajoutez transition: box-shadow .2s sur .btn-glow pour adoucir le saut. |
| animation-timing-function (CSS — .btn-glow) | ease-in-out | linear donne une pulsation mécanique ; cubic-bezier(.4, 0, .6, 1) allonge le temps passé aux extrêmes. |
| animation-delay (CSS — .btn-glow) | 0s | Décalez plusieurs boutons (-1s, -.5s) pour qu'ils ne pulsent pas en phase — ou, mieux, n'en faites pulser qu'un. |
FAQ
box-shadow n'est pas composé par le GPU. Un ou deux boutons : imperceptible. Au-delà, déplacez l'ombre sur un ::after positionné sous le bouton, portant le box-shadow maximal, et animez son opacity de .4 à 1 — opacity est composée, le repaint disparaît.animation: none coupe net la boucle et pose une ombre fixe de 50 px sans transition ; au départ du curseur, l'animation redémarre à son 0 % (20 px). Ajoutez transition: box-shadow .25s sur .btn-glow pour lisser l'entrée ; le redémarrage à 20 px restera — c'est le fonctionnement de animation en CSS, pas un défaut..is-done) qui déclare animation: none et une ombre légère, et posez-la au clic ou à la réponse du serveur — trois lignes de JS. Un halo qui pulse sur une étape déjà validée est le contresens le plus fréquent avec cet effet.
