Press Feedback
Bouton orange à ombre colorée : il se soulève de 2 px au survol, puis au clic descend de 2 px, se comprime à 95 % et son contenu à 98 % pendant que l'ombre se resserre — 150 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
Trois états sur .btn-press-feedback, un dégradé linear-gradient(135deg, #f97316, #ea580c) avec une ombre teintée 0 4px 15px rgba(249,115,22,.4) — c'est cette ombre orange, plutôt qu'un gris, qui donne au bouton l'air de rayonner sur sa surface. transition: .15s (toutes propriétés, courbe ease) lie les états.
Au :hover : transform: translateY(-2px) et une ombre plus lointaine et plus large, 0 8px 25px rgba(249,115,22,.5). Le bouton semble s'écarter de la surface. Au :active : translateY(2px) scale(.95) et une ombre rase 0 2px 8px rgba(249,115,22,.3) — il redescend sous sa position de repos, rétrécit et l'ombre se colle à lui. Mesuré dans Chromium : 134 × 50 px au repos, 128 × 47,5 px pendant le clic, décalé de 2 px vers le bas.
Le libellé est enveloppé dans <span class="btn-content">, en display: flex; align-items: center; gap: 8px — prêt à recevoir une icône à côté du texte — avec sa propre transition: transform .15s. Au clic, .btn-press-feedback:active .btn-content { transform: scale(.98) } : le contenu se comprime en plus du bouton, soit 0,95 × 0,98 ≈ 0,93 pour le texte. Cette double compression fait paraître le libellé enfoncé dans le bouton, pas seulement réduit avec lui.
Tout passe par transform et box-shadow : aucune propriété de mise en page ne change, les voisins ne bougent pas (contrairement à 3D Press, qui joue sur une bordure). Le span.btn-content est nécessaire pour la compression interne et l'espacement d'icône ; sans lui, le bouton fonctionne mais perd ces deux détails.
Accessibilité
- Contraste insuffisant dans la version fournie : texte blanc sur le dégradé
#f97316 → #ea580c= 2,8:1 et 3,6:1, sous le seuil AA de 4,5:1 pour un texte de 16 px. Passez àlinear-gradient(135deg, #c2410c, #9a3412)(5,2:1 et 7,3:1), ou gardez#ea580cseul avec un libellé de 18 px gras (seuil 3:1). Recolorez l'ombre avec (rgba(194,65,12,.4)). - prefers-reduced-motion absent du code : les déplacements font 2 à 4 px sur 150 ms. Ajoutez
@media (prefers-reduced-motion: reduce) { .btn-press-feedback, .btn-press-feedback .btn-content { transition: none } }— les états basculent sans glissement. - Clavier :
:actives'applique pendant l'appui sur Espace, la compression fonctionne donc au clavier. Le soulèvement de survol n'a pas d'équivalent : ajoutez.btn-press-feedback:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(249,115,22,.5) }. L'outlinenatif est conservé, mais bleu sur orange il se lit mal —outline: 2px solid #fff; outline-offset: 3pxest plus net. - Tactile : c'est l'un des rares effets du catalogue pensés pour le doigt —
:activese déclenche au toucher et la compression est visible sous le pouce pendant le tap. Ajouteztouch-action: manipulationpour supprimer le délai de double-tap sur iOS. L'état:hoverreste collé après le tap (@media (hover: hover)). Cible ≈ 50 px de haut, au-dessus du minimum de 44 px. - Lecteurs d'écran : le
span.btn-contentest un simple conteneur, le nom accessible reste le libellé. Si vous y placez une icône, mettez-la enaria-hidden="true"pour qu'elle ne soit pas lue.
Compatibilité navigateur
Requiert les transitions CSS sur transform et box-shadow, et display: flex pour le contenu — tous les navigateurs depuis 2012. Aucun JavaScript, zéro dépendance.
Sans transitions, les trois états s'appliquent instantanément : le bouton saute de 2 px et se comprime d'un coup, l'ombre change sans fondu — le retour au clic reste lisible.
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 |
|---|---|---|
| transform (CSS — :active) | translateY(2px) scale(.95) | Enfoncement au clic. scale(.97) pour un grand bouton (5 % de 300 px = 15 px, trop visible) ; translateY(3px) pour une course plus franche. |
| transform (CSS — :active .btn-content) | scale(.98) | Compression supplémentaire du contenu (texte + icône). 1 l'annule ; .94 fait nettement rentrer le texte dans le bouton. |
| transform / box-shadow (CSS — :hover) | translateY(-2px) / 0 8px 25px .5 | Soulèvement au survol. Supprimez la règle pour ne garder que le clic (le comportement mobile) ; translateY(-1px) dans une barre d'outils serrée. |
| Couleur d'ombre rgba(249,115,22,…) (CSS — 3 occurrences) | orange à .4 / .5 / .3 | L'ombre est teintée de la couleur du bouton : c'est ce qui fait « rayonner ». Un gris (rgba(0,0,0,.3)) donne une ombre classique ; alignez la teinte si vous changez le dégradé. |
| transition (CSS — .btn-press-feedback et .btn-content) | .15s | Durée des trois transitions. .1s = clic plus sec ; .25s = plus doux, mais le retour paraît alors en retard sur le doigt. |
| background (CSS — .btn-press-feedback) | linear-gradient(135deg, #f97316, #ea580c) | Couleur du bouton. Pour un contraste AA avec le texte blanc : #c2410c → #9a3412. Recolorez l'ombre avec. |
| gap (CSS — .btn-content) | 8px | Espace entre le libellé et une icône placée dans le span. Sans icône, la valeur est sans effet. |
FAQ
:active .btn-content ne trouve rien sans lui) et l'espacement d'icône (gap: 8px). Un <button class="btn-press-feedback">Envoyer</button> nu se soulève et s'enfonce normalement. Si vous ajoutez une icône SVG, placez-la dans le span avec aria-hidden="true" ; align-items: center l'aligne sur le texte.:active s'applique pendant le tap. Deux compléments : touch-action: manipulation sur le bouton pour supprimer le délai de détection du double-tap (iOS Safari), et, si le contexte le justifie, une vibration très courte au clic via navigator.vibrate(8) (Android uniquement, iOS ne l'expose pas). Évitez les durées supérieures à 150 ms : le doigt est déjà reparti.
