3D Depth Press
Face violette en dégradé posée 4 px au-dessus d'une tranche pleine dessinée par box-shadow : le survol la soulève à 6 px, le clic la ramène à zéro — la base ne bouge jamais, 150 ms, CSS seul, sans décalage de mise en page.
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 faite de deux box-shadow sur .btn-3d-depth : une ombre sans flou, 0 6px 0 #4c1d95, qui dessine une tranche violette foncée sous la face, et une ombre douce 0 8px 15px rgba(0,0,0,.3) qui pose l'ensemble sur la surface. La face elle-même est un linear-gradient(145deg, #7c3aed, #5b21b6) — le dégradé diagonal évite l'aplat et suggère une lumière venant d'en haut à gauche.
Au repos, la face est déjà décalée : transform: translateY(-4px). Elle flotte 4 px au-dessus de sa position de mise en page, et la tranche de 6 px descend 2 px sous cette position. Au :hover, translateY(-6px) et tranche 0 8px 0 ; au :active, translateY(0) et tranche 0 2px 0. Dans les trois états, translation + épaisseur de tranche = 2 px : le bas de la tranche reste exactement au même endroit. Mesuré dans Chromium, le bord bas de la base est à 177 px au repos, au survol et au clic.
C'est ce qui distingue l'effet de 3D Press : ici la tranche est une ombre et la course une transformation, deux propriétés qui ne participent pas à la mise en page. Le bouton mesure toujours 134 × 50 px pour le navigateur, quel que soit l'état, et les éléments voisins ne bougent pas d'un pixel (vérifié avec un frère sous le bouton). L'ombre douce accompagne : plus lointaine au survol (0 12px 20px, opacité .4), rase au clic (0 3px 8px).
transition: .15s (toutes propriétés, courbe ease) lie les états ; la course du survol au clic fait 6 px, assez pour être vue, assez courte pour paraître instantanée. Le border-radius: 12px hérité de .demo-btn s'applique à la face et, par construction, à la tranche (une ombre suit les coins de la boîte).
Accessibilité
- Contraste : texte blanc sur le dégradé
#7c3aed → #5b21b6= 5,7:1 et 9,0:1 — niveau AA sur toute la face, AAA sur la moitié sombre. L'un des rares boutons du catalogue livrés conformes sans retouche. - prefers-reduced-motion absent du code : les déplacements font 2 à 6 px sur 150 ms. Ajoutez
@media (prefers-reduced-motion: reduce) { .btn-3d-depth { transition: none } }— la touche saute entre ses positions sans glisser, le relief reste. - Clavier :
:actives'applique pendant l'appui sur Espace, la touche s'enfonce donc au clavier. Ajoutez.btn-3d-depth:focus-visible { transform: translateY(-6px); box-shadow: 0 8px 0 #4c1d95, 0 12px 20px rgba(0,0,0,.4) }pour que le focus soulève comme le survol. L'outlinenatif est conservé ; il suit la face translatée. - Tactile :
:activese déclenche au toucher — la face descend de 4 px sous le doigt pendant le tap, c'est un bon retour mobile. Sur iOS le soulèvement de survol reste collé après le tap (@media (hover: hover)). Cible ≈ 50 px de haut (56 px avec la tranche), au-dessus du minimum de 44 px. - Repérage : la tranche
#4c1d95et la face se détachent nettement d'un fond sombre comme clair (face 5,7:1 minimum contre le texte, tranche 1,8:1 contre#0a0a0f— un repère décoratif, la face fait le contour). Aucun contenu généré : le nom accessible est le libellé.
Compatibilité navigateur
Requiert les transitions CSS sur transform et box-shadow, les ombres multiples et linear-gradient() — tous les navigateurs depuis 2012. Aucun JavaScript, zéro dépendance.
Sans transitions, les trois états s'appliquent instantanément : la face saute de 2 à 6 px au lieu de glisser, le relief et la base fixe restent intacts.
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 |
|---|---|---|
| translateY (CSS — repos −4px / survol −6px / clic 0) | −4 / −6 / 0 px | Hauteur de la face au-dessus de sa base. Gardez translation + épaisseur de tranche constante (ici 2 px) pour que la base ne bouge pas. |
| Tranche 0 Npx 0 #4c1d95 (CSS — 1re ombre, 3 états) | 6 / 8 / 2 px | Épaisseur de la tranche pleine. 10px = touche d'arcade ; 3px = touche plate. Ajustez les translations en conséquence. |
| Couleur de tranche (CSS — #4c1d95, 3 occurrences) | #4c1d95 | Face assombrie d'environ 25 %. Une couleur trop proche de la face aplatit le relief ; trop sombre, la tranche lit comme une ombre portée. |
| Ombre douce (CSS — 2de ombre, 3 états) | 0 8px 15px .3 / 0 12px 20px .4 / 0 3px 8px .3 | Pose le bouton sur la surface et accentue la hauteur. Supprimez-la pour un rendu « dessin animé » à plat, ne gardant que la tranche. |
| transition (CSS — .btn-3d-depth) | .15s | Durée des trois transitions. .08s = clic sec ; .25s = touche lourde. |
| background (CSS — .btn-3d-depth) | linear-gradient(145deg, #7c3aed, #5b21b6) | Face. Le contraste passe déjà AA ; si vous changez la teinte, recalculez la tranche (face −25 %) et vérifiez le texte blanc à 4,5:1. |
| Réserve verticale (contexte — marge) | 4 px au-dessus, 2 px au-dessous | Au repos la face dépasse de 4 px au-dessus de sa boîte et la tranche de 2 px au-dessous : prévoyez margin-top: 4px dans une pile serrée pour ne rien chevaucher. |
FAQ
transform: translateY(-4px) s'applique dès le repos : la face est dessinée 4 px au-dessus de sa position de mise en page, tandis que la tranche descend 2 px au-dessous. Dans une rangée de boutons, celui-ci semble donc décalé vers le haut. Compensez avec margin-top: 4px (ou translate sur le conteneur), ou, si vous voulez une face alignée, mettez la translation de repos à 0 et décalez les deux autres états d'autant (−2 px au survol, +4 px au clic avec une tranche qui passe à 0).border-bottom : la bordure fait partie de la boîte, donc les voisins se décalent de 2 px à chaque état. Ici la tranche est un box-shadow et la course un transform — aucune des deux n'entre dans la mise en page, rien ne bouge autour. En contrepartie, les ombres ne sont pas rognées par overflow: hidden d'un parent aussi proprement qu'une bordure : gardez 15 px de marge sous le bouton pour l'ombre douce..btn-3d-depth:hover. Le repos (−4 px, tranche 6 px) et le clic (0, tranche 2 px) suffisent : la face descend de 4 px vers une base immobile. C'est le comportement que voient déjà les utilisateurs tactiles, pour qui le survol n'existe pas.
