3D Press
Une touche verte posée sur une tranche plus sombre de 4 px : au survol la face monte de 2 px et la tranche s'épaissit, au clic elle s'enfonce de 2 px et la tranche s'amincit — en 100 ms, CSS seul.
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
La « profondeur » est une simple border-bottom: 4px solid #059669 sur un bouton #10b981 : .demo-btn pose border-style: none sur les quatre côtés, puis .btn-3d ne rétablit que le bas. La bande sombre de 4 px sous la face lit comme la tranche d'une touche de clavier. Aucun box-shadow, aucun pseudo-élément, aucun JavaScript.
Au :hover, deux changements simultanés : transform: translateY(-2px) remonte la face, et border-bottom-width: 6px épaissit la tranche. Comme la boîte grandit de 2 px vers le bas pendant qu'elle est translatée de 2 px vers le haut, le bord inférieur ne bouge pas : seule la face se soulève, ce qui donne l'illusion d'une touche qui se décolle de sa base.
Au :active, l'inverse : translateY(2px) et border-bottom-width: 2px. La boîte perd 2 px, la translation les compense, le bord inférieur reste à sa place et la face descend de 4 px par rapport à l'état survolé — la course d'une vraie touche. Les trois états sont liés par transition: .1s (toutes propriétés, courbe ease), assez court pour que le clic paraisse instantané.
Mesuré dans Chromium : hauteur 54 px au repos, 56 px au survol, 52 px au clic. Comme la bordure fait partie de la boîte de mise en page, les éléments qui suivent le bouton se décalent de 2 px vers le bas au survol et vers le haut au clic (ligne de texte inline : 54 → 56 px ; frère en colonne : déplacé de ±2 px). C'est la contrepartie de la technique par bordure ; la variante 3D Depth Press du catalogue évite ce décalage avec un box-shadow.
Accessibilité
- Contraste insuffisant dans la version fournie : texte blanc sur
#10b981= 2,54:1, sous le seuil AA de 4,5:1 et même sous le seuil de 3:1 des grands textes. Passez la face à#047857(5,5:1) avec une tranche#065f46, ou à#065f46(7,7:1) avec une tranche#064e3b. - prefers-reduced-motion absent du code : le déplacement ne fait que 2 à 4 px sur 100 ms, mais ajoutez
@media (prefers-reduced-motion: reduce) { .btn-3d { transition: none } }— les états restent, ils basculent sans glissement. - Clavier :
:actives'applique pendant l'appui sur Espace (Chrome, Firefox, Safari) : la touche s'enfonce au clavier comme à la souris. Le survol n'existe pas au clavier ;.btn-3d:focus-visible { transform: translateY(-2px); border-bottom-width: 6px }donne à la navigation Tab le même soulèvement. - Focus : le code écrit
border-style: nonepuis une seule bordure, sans toucher àoutline— l'anneau de focus natif reste visible. Si vous le redessinez, préférezoutline-offset: 3pxpour qu'il ne se confonde pas avec la tranche. - Tactile :
:activese déclenche au toucher (la touche s'enfonce sous le doigt pendant le tap) ; sur iOS l'état:hoverreste collé après le tap jusqu'au toucher suivant — enveloppez la règle de survol dans@media (hover: hover). Cible ≈ 54 px de haut, au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert les transitions CSS sur transform et border-bottom-width — tous les navigateurs depuis 2012. Aucun JavaScript, zéro dépendance.
Sans transitions, les trois états s'appliquent instantanément : la touche saute de 2 px au lieu de glisser, le relief et le clic restent lisibles.
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-3d) | #10b981 | Couleur de la face. Pour un contraste AA avec le texte blanc : #047857 ou plus sombre. Changez la tranche en même temps. |
| border-bottom (CSS — .btn-3d) | 4px solid #059669 | Épaisseur et couleur de la tranche au repos. La couleur doit être la face assombrie d'environ 15 % ; 8px donne une touche d'arcade, 2px une touche plate. |
| translateY / border-bottom-width (CSS — :hover) | -2px / 6px | Soulèvement au survol. Gardez |translateY| = épaisseur du survol − épaisseur du repos pour que le bord inférieur reste fixe. |
| translateY / border-bottom-width (CSS — :active) | 2px / 2px | Course au clic. Même règle : translation = repos − clic (4 − 2 = 2). 4px / 0 écrase complètement la touche. |
| transition (CSS — .btn-3d) | .1s | Durée des trois transitions. .06s pour un clic plus sec ; au-delà de .2s la touche paraît molle. |
| border-radius (CSS — .demo-btn) | 12px | Arrondi de la touche, tranche comprise. 6px = touche de clavier ; 999px = pilule à tranche. |
| Compensation du décalage (CSS — à ajouter) | aucune | La bordure fait bouger la mise en page de ±2 px. Pour l'annuler : .btn-3d:hover { margin-bottom: -2px } .btn-3d:active { margin-bottom: 2px } — ou réservez 2 px de marge sous le bouton. |
FAQ
border-bottom-width, qui fait partie de la boîte de mise en page : au survol le bouton mesure 2 px de plus, au clic 2 px de moins, et tout ce qui suit se décale d'autant (mesuré : une ligne de texte passe de 54 à 56 px). Compensez avec une marge négative sur les mêmes états (margin-bottom: -2px au survol, 2px au clic), ou dessinez la tranche avec box-shadow: 0 4px 0 #059669, qui ne participe pas à la mise en page..btn-3d:hover. Le repos (tranche 4 px) et le clic (translateY(2px), tranche 2 px) suffisent à l'illusion : la face descend de 2 px vers une base qui ne bouge pas. C'est aussi le réglage à retenir pour le tactile, où le survol n'existe pas.display: inline-block ou block : transform et border-bottom-width n'agissent pas sur un élément inline pur. Pour une touche carrée sans texte (pictogramme), fixez width et height, mettez padding: 0 et centrez le contenu en display: inline-flex.
