Neumorphic
Bouton gris clair extrudé de sa surface par deux ombres opposées (sombre en bas à droite, blanche en haut à gauche) ; le clic les inverse en creux.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 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
Deux box-shadow au repos : 8px 8px 16px #bebebe (sombre, en bas à droite) et -8px -8px 16px #fff (blanche, en haut à gauche). Elles simulent une source lumineuse en haut à gauche frappant une forme en relief. Le background: #e0e0e0 du bouton doit être exactement la couleur de la surface qui l'entoure : l'illusion ne tient que parce que bouton et fond sont identiques, le bord n'étant dessiné que par les ombres.
Au :hover, les décalages passent à 10 px et le flou à 20 px : la forme semble se soulever un peu plus. transition: .2s (toutes propriétés) lisse le changement d'ombres.
Au :active, les deux ombres basculent en inset avec les mêmes valeurs : l'ombre sombre tombe maintenant à l'intérieur, en haut à gauche, et la blanche à l'intérieur, en bas à droite — la forme paraît enfoncée dans la surface. Mêmes couleurs, seul le mot-clé inset change.
Texte #333 sur #e0e0e0, border: none, coins border-radius: 12px hérités de .demo-btn qui donnent sa forme à l'extrusion. Aucun JavaScript.
Accessibilité
- Repérage du bouton : sa limite n'est dessinée que par des ombres, et
#bebebesur la surface#e0e0e0ne contraste qu'à 1,4:1 — sous le seuil de 3:1 exigé par WCAG 1.4.11 pour le contour d'un composant d'interface. Une personne malvoyante peut ne pas voir le bouton. Ajoutez une bordure de 1 px (#c8c8c8), un libellé coloré ou des ombres plus marquées. - Contraste du texte :
#333sur#e0e0e0= 9,6:1, niveau AAA. Gardez un libellé sombre — le gris clair courant dans les maquettes neumorphiques tombe vite sous le seuil AA. - prefers-reduced-motion : le seul mouvement est une transition d'ombres de 200 ms, négligeable ;
transition: nonesous la media query ne coûte rien. - Focus : le code écrit
border: nonesans toucher àoutline, l'anneau natif reste visible sur gris clair. Si vous le personnalisez, utilisezoutline: 2px solid #333; outline-offset: 3px— jamais un focus par ombre, qui se perdrait dans celles du relief. - États : le retour « enfoncé » n'existe que pendant l'appui (
:active), pas comme état sélectionné persistant. Pour un bouton bascule (lecture/pause, mode nuit), ajoutezaria-pressedet une règle[aria-pressed="true"]reprenant les ombresinset. Cible tactile ≈ 52 px ; sur iOS le soulèvement:hoverreste collé après un tap.
Compatibilité navigateur
Requiert des box-shadow multiples avec inset et une transition — tous les navigateurs depuis 2011. Aucun JavaScript, zéro dépendance.
Sans transition, les états basculent instantanément. La seule vraie dépendance est le fond : sur une surface d'une autre couleur que #e0e0e0, le relief disparaît et l'ombre blanche se lit comme un halo.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| background (CSS — .btn-neumorphic) = couleur de la surface | #e0e0e0 | À changer en même temps que le fond du parent : les deux doivent être identiques. Recalculez les ombres : sombre ≈ fond assombri de 15 %, claire = blanc (ou fond éclairci de 10 % sur une surface très claire). |
| Ombre sombre #bebebe (CSS — box-shadow, 3 occurrences) | #bebebe | Ombre portée en bas à droite. #b0b0b0 accentue le relief ; atteindre 3:1 avec la surface demanderait ≈ #808080, qui n'est plus du neumorphisme — pour l'accessibilité, ajoutez plutôt une bordure de 1 px. |
| Décalage / flou 8px 8px 16px (CSS — repos) | 8px / 16px | Hauteur perçue du relief. 4px / 8px = touche plate ; 12px / 24px = bloc épais. Gardez flou = 2 × décalage. |
| Survol 10px 10px 20px (CSS — :hover) | +2 px de décalage, +4 px de flou | Amplitude du soulèvement au survol. Alignez sur le repos pour supprimer l'effet de survol et ne garder que le clic. |
| inset (CSS — :active) | inset 8px 8px 16px / inset -8px -8px 16px | Profondeur du creux au clic. 4px / 8px pour une touche fine ; ajoutez transform: translateY(1px) pour accentuer l'enfoncement. |
| transition (CSS — .btn-neumorphic) | .2s | Vitesse de bascule relief → creux. .1s = clic sec ; .35s = mousse lente. |
| border-radius (CSS — .demo-btn) | 12px | 50% donne les touches rondes d'un lecteur ; 6px, une touche de clavier. |
FAQ
#e0e0e0. Le relief neumorphique n'existe que si le bouton a exactement la couleur de sa surface : sur un fond blanc l'ombre blanche disparaît et il reste une tache grise ; sur un fond sombre elle devient un halo. Changez le background du bouton et du parent ensemble, puis recalculez les deux ombres.#2b2b30, ombre sombre #1d1d21 (en bas à droite), ombre claire #39393f (en haut à gauche) — jamais du blanc pur, qui se lirait comme une lueur. Texte en #e5e5e5 (contraste ≈ 11:1).:active sous un sélecteur d'état, par exemple .btn-neumorphic[aria-pressed="true"], et basculez l'attribut au clic (btn.setAttribute('aria-pressed', …)). Le creux devient l'état « enfoncé », lisible aussi par les lecteurs d'écran.
