Shadow Inset
Une lueur intérieure indigo gonfle depuis le centre de l'élément (box-shadow inset 0 → 30 px) en 0,3 s au survol — pure CSS, aucun pseudo-élément.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Hover comprend 48 effets, dont 5 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0351-root centre un bouton de 200 px. Au repos, box-shadow est absent. Au survol, box-shadow: rgba(99, 102, 241, 0.5) 0 0 30px inset étend une lueur indigo depuis les bords vers l'intérieur de l'élément en 0,3 s. L'ombre interne (mot-clé inset) est dessinée à l'intérieur des bordures de l'élément, sans déborder sur les voisins — contrairement à une ombre externe. L'intensité est contrôlée par le rayon de flou (30px) et l'opacité de la couleur (0.5).
Aucun pseudo-élément, aucun dégradé ajouté — la seule propriété animée est box-shadow. :focus-visible déclenche la même lueur avec un contour indigo en plus. Pure CSS. Sous mouvement réduit, la transition est supprimée mais la lueur apparaît instantanément au survol et au focus — retour d'état garanti.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la transition est neutralisée. La lueur apparaît instantanément au survol et au focus. - Clavier : l'élément est un
<button>nativement focusable.:focus-visibledéclenche la lueur et ajoute un contour de 2 px pour signaler le focus clavier. - Visibilité sur fond clair : la lueur indigo peut manquer de contraste sur un fond blanc ou beige. Ajustez la couleur et l'opacité pour maintenir un signal visible.
- Toucher : le tap active le survol CSS sur la plupart des navigateurs mobiles. La lueur reste active jusqu'au prochain changement de focus.
Compatibilité navigateur
Pure CSS. Propriétés : box-shadow inset, transition, :focus-visible. Vérifié dans Chromium et Firefox : lueur visible, deux copies indépendantes, 0 erreur. box-shadow inset est supporté depuis Chrome 10, Firefox 4, Safari 5.1 — aucune limite de navigateur moderne.
Sans :focus-visible (avant 2021), le focus clavier ne déclenche pas la lueur.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0351-root">
<button class="isw-box isw-inset" type="button">
<span>Votre texte</span>
</button>
</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 |
|---|---|---|
Couleur de la lueur (CSS — rgba(99, 102, 241, 0.5)) |
indigo à 50 % | Remplacez la couleur par la teinte de votre charte. rgba(255, 200, 50, 0.4) donne une lueur dorée chaude. |
Rayon de flou (CSS — 30px dans box-shadow) |
30 px | 10 px donne une lueur concentrée sur les bords ; 60 px une lueur ample qui remplit le centre. Au-delà de la moitié de la largeur de l'élément, le centre est atteint. |
Opacité de la lueur (CSS — 0.5 dans rgba) |
50 % | 0.2 est très discret ; 0.8 est intense. Adaptez selon le fond : plus le fond est sombre, plus l'opacité peut être élevée. |
Durée (CSS — 0.3s) |
0,3 s | 0,15 s est plus vif ; 0,5 s plus doux. |
| Lueur externe combinée (CSS — ajouter un 2e box-shadow sans inset) | lueur intérieure seule | Ajoutez , rgba(99, 102, 241, 0.2) 0 4px 20px à la valeur box-shadow pour une lueur externe subtile en même temps — les deux séparées par une virgule s'animent ensemble. |
FAQ
box-shadow accepte plusieurs valeurs séparées par des virgules. Ajoutez une seconde valeur sans inset : box-shadow: rgba(99,102,241,0.5) 0 0 30px inset, rgba(99,102,241,0.2) 0 8px 24px. Les deux s'animent ensemble.0.7 ou 0.8) et/ou le rayon de flou (40-50px). Vous pouvez aussi choisir une couleur plus saturée ou plus foncée que l'indigo selon votre palette.@keyframes sur box-shadow avec plusieurs étapes, ou une animation CSS sur hue-rotate via filter appliqué à l'élément parent.
