Gummy Elastic
Au survol le bouton grossit de 10 % et s'arrondit ; au clic il se comprime — une courbe cubic-bezier à dépassement fait tout le rebond, sans JS.
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, tous en CSS : le repos (scale(1), border-radius: 12px hérité de .demo-btn), le :hover (transform: scale(1.1); border-radius: 30px) et le :active (transform: scale(.95); border-radius: 8px). Aucune @keyframes : le mouvement n'est que la transition entre ces états.
La transition : transition: .3s cubic-bezier(.68, -.55, .265, 1.55) sur .btn-gummy — propriété all (valeur par défaut), 300 ms. Les points de contrôle hors de [0, 1] en Y (−.55 et 1.55) font sortir la courbe de l'intervalle départ → arrivée : elle recule d'abord d'environ 9 % de la course (vers 60 ms), puis dépasse la cible d'environ 9 % (vers 235 ms) avant de se poser. Pour scale 1 → 1.1 : creux vers 0.99, pic vers 1.11.
border-radius suit la même courbe : 12 → 30 px dépasse jusqu'à ≈ 31,6 px et revient ; au clic, 30 → 8 px. C'est le changement simultané de forme et de taille qui se lit comme du caoutchouc — un rebond sur le seul scale ressemblerait à un zoom.
L'ordre des règles compte : :active est déclaré après :hover, donc pendant que le bouton de la souris est enfoncé, l'état comprimé l'emporte. Au relâchement, le bouton revient à l'état survolé par la même courbe de 300 ms — le rebond de relâchement ne demande rien de plus.
Accessibilité
- prefers-reduced-motion absent du code : ajoutez
@media (prefers-reduced-motion: reduce) { .btn-gummy { transition: none } }. Les états survol et clic changent toujours, mais instantanément et sans dépassement. - Clavier :
:actives'applique pendant l'appui sur Espace dans la plupart des navigateurs, mais aucun:hovern'existe au clavier. Déclarez.btn-gummy:focus-visible { transform: scale(1.1); border-radius: 30px }pour donner à la navigation Tab le même relief qu'au survol. - Contraste : texte blanc sur
#ec4899= 3,5:1, sous le seuil AA de 4,5:1 pour un texte de 16 px.#db2777donne 4,6:1 et#be185d6,0:1. L'agrandissement ne change rien au contraste. - Le code écrit
border: nonesans toucher àoutline: le contour de focus natif reste et suit la transformation (outlinen'est pas coupé paroverflow: hidden). - Tactile : sur iOS, l'état
:hoverreste collé après un tap (le bouton demeure à 1.1 jusqu'au toucher suivant) ; enveloppez la règle de survol dans@media (hover: hover)pour l'éviter. Cible ≈ 52 px de haut, 57 px au survol — au-dessus du minimum de 44 px.
Compatibilité navigateur
Requiert la transition CSS de transform et border-radius avec cubic-bezier() — tous les navigateurs depuis 2012, valeurs de dépassement comprises. Aucun JavaScript, zéro dépendance.
Sans transitions, les trois états s'appliquent instantanément : le bouton reste utilisable, seul le rebond disparaît.
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 |
|---|---|---|
| cubic-bezier(.68, -.55, .265, 1.55) (CSS — transition) | ≈ 9 % de recul puis 9 % de dépassement | Ramenez le 2ᵉ et le 4ᵉ paramètre vers 0 et 1 pour calmer le rebond (.68, -.2, .265, 1.2) ; éloignez-les pour l'exagérer (-.8 / 1.8). Trop loin, border-radius passe sous 0 un instant : coins carrés. |
| transition-duration (CSS — .btn-gummy) | .3s | Durée totale d'une transition, rebond compris. .2s = sec ; .5s = gélatineux. |
| scale(1.1) (CSS — :hover) | 1.1 | Grossissement au survol. Prévoyez la place : à 1.1, un bouton de 200 px empiète de 10 px de chaque côté. |
| scale(.95) (CSS — :active) | .95 | Compression au clic. Combinez avec translateY(2px) pour un enfoncement. |
| border-radius (CSS — 12px repos / 30px survol / 8px clic) | 12 / 30 / 8 px | La déformation de forme fait le côté « gomme ». Passez le survol à 999px pour un bouton qui se transforme en pilule. |
| transition-property (CSS — implicite) | all | Limitez à transform, border-radius pour ne pas animer un changement de couleur ou de box-shadow avec la même courbe à rebond. |
| background (CSS — .btn-gummy) | #ec4899 | Couleur unie. Pour un contraste AA avec le texte blanc : #db2777 ou plus foncé. |
FAQ
-.55 : la valeur passe sous le point de départ pendant les 60 premières millisecondes environ (≈ −9 % de la course, soit scale(.99)). C'est l'anticipation qui rend le rebond crédible ; mettez ce paramètre à 0 pour la supprimer.transform: scale() agrandit le rendu matriciel du texte pendant la transition ; à l'arrivée, le navigateur le rastérise à nouveau, net. Sur 300 ms c'est rarement perceptible. Si ça l'est, gardez le scale sous 1.05 et faites porter l'effet surtout au border-radius, qui n'altère pas le texte..btn-gummy sur un <a> en display: inline-block (les transform n'agissent pas sur un élément inline pur) et gardez :hover / :active. Pour une icône seule, fixez border-radius: 50% dans les trois états : seul le scale rebondit.
