Introduction
L'effet glow (ou effet de lueur) est l'un des effets les plus populaires en web design moderne. Il donne un aspect premium et futuriste a vos boutons, attirant immediatement l'attention de l'utilisateur.
Dans ce tutoriel, nous allons explorer 5 variations differentes de l'effet glow, du plus simple au plus elabore. Chaque exemple est accompagne du code complet que vous pouvez copier et adapter a votre projet.
L'effet glow utilise principalement la propriete box-shadow. Cette propriete est supportee par tous les navigateurs modernes sans prefixe.
1. Glow basique au hover
Commencons par la version la plus simple : un glow qui apparait au survol de la souris. C'est l'implementation ideale si vous voulez un effet subtil et non intrusif.
.btn-glow {
padding: 16px 32px;
font-size: 1rem;
font-weight: 600;
background: #6366f1;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
/* Glow de base visible */
box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.btn-glow:hover {
/* Glow intensifie au hover */
box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
transform: translateY(-2px);
}Comment ca fonctionne
La propriete box-shadow accepte plusieurs parametres :
- Offset X et Y (0 0) : On garde a zero pour que le glow soit centre autour du bouton
- Blur radius (20px/40px) : Plus cette valeur est grande, plus le glow est diffus
- Couleur avec opacite : Utilisez
rgba()pour controler l'intensite
2. Glow anime en boucle
Pour attirer encore plus l'attention, ajoutons une animation qui fait pulser le glow en continu. C'est parfait pour les boutons call-to-action importants.
.btn-glow-animated {
padding: 16px 32px;
background: #6366f1;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
/* Animation en boucle infinie */
animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% {
box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
}
50% {
box-shadow:
0 0 40px rgba(99, 102, 241, 0.8),
0 0 60px rgba(99, 102, 241, 0.4);
}
}
/* Pause l'animation au hover pour feedback */
.btn-glow-animated:hover {
animation-play-state: paused;
box-shadow: 0 0 50px rgba(99, 102, 241, 1);
}Les animations en boucle peuvent etre genantes pour certains utilisateurs. Pensez a utiliser @media (prefers-reduced-motion: reduce) pour les desactiver si l'utilisateur a configure cette preference.
3. Glow avec gradient
Pour un effet encore plus sophistique, combinons un arriere-plan degrade avec un glow bicolore. Cette technique cree un effet de profondeur tres elegant.
.btn-glow-gradient {
padding: 16px 32px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
animation: glowGradient 3s ease-in-out infinite;
}
@keyframes glowGradient {
0%, 100% {
box-shadow:
0 0 20px rgba(99, 102, 241, 0.5),
0 0 40px rgba(139, 92, 246, 0.3);
}
50% {
box-shadow:
0 0 30px rgba(139, 92, 246, 0.6),
0 0 60px rgba(99, 102, 241, 0.4);
}
}4. Effet Neon
L'effet neon est une variante populaire qui combine un glow externe avec un text-shadow et une bordure coloree. Le resultat rappelle les enseignes lumineuses retro.
.btn-neon {
padding: 16px 32px;
background: transparent;
color: #00ff88;
border: 2px solid #00ff88;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
/* Glow sur le texte */
text-shadow: 0 0 10px #00ff88;
/* Glow externe + interne */
box-shadow:
0 0 20px rgba(0, 255, 136, 0.3),
inset 0 0 20px rgba(0, 255, 136, 0.1);
}
.btn-neon:hover {
background: #00ff88;
color: #0a0a0f;
text-shadow: none;
box-shadow:
0 0 40px rgba(0, 255, 136, 0.6),
0 0 80px rgba(0, 255, 136, 0.3);
}5. Glow Rainbow anime
Pour finir en beaute, voici un effet spectaculaire : un glow qui change de couleur en suivant un degrade arc-en-ciel anime. A utiliser avec parcimonie !
.btn-rainbow {
padding: 16px 32px;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
/* Gradient anime */
background: linear-gradient(
90deg,
#ff0080,
#ff8c00,
#40e0d0,
#ff0080
);
background-size: 300% 100%;
animation: rainbowGlow 4s linear infinite;
}
@keyframes rainbowGlow {
0% {
background-position: 0% 50%;
box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
}
33% {
box-shadow: 0 0 20px rgba(255, 140, 0, 0.5);
}
66% {
box-shadow: 0 0 20px rgba(64, 224, 208, 0.5);
}
100% {
background-position: 300% 50%;
box-shadow: 0 0 20px rgba(255, 0, 128, 0.5);
}
}Bonnes pratiques
Avant de conclure, voici quelques recommandations pour utiliser les effets glow de maniere efficace :
Performance
- Limitez le nombre d'elements avec glow anime sur une meme page
- Utilisez
will-change: box-shadowsi vous avez des problemes de performance - Preferez les transitions aux animations quand c'est possible
Design
- Gardez la coherence : utilisez les memes couleurs que votre charte graphique
- Fond sombre recommande : les glows ressortent mieux sur fond fonce
- Un seul CTA glow par section pour ne pas diluer l'attention
Accessibilite
/* Desactiver les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
.btn-glow-animated,
.btn-glow-gradient,
.btn-glow-rainbow {
animation: none;
}
}Conclusion
L'effet glow est un outil puissant pour mettre en valeur vos boutons et CTAs. En maitrisant box-shadow et @keyframes, vous pouvez creer une infinite de variations adaptees a votre design.
N'hesitez pas a experimenter avec les valeurs et les couleurs pour trouver l'effet parfait pour votre projet. Et souvenez-vous : la subtilite est souvent plus efficace que l'exces !
Retrouvez 27 effets de boutons prets a l'emploi dans notre bibliotheque d'effets, avec code copiable en un clic.