Il pulsante elastico

Pulsanti, Hover, TestoGSAP, Solo CSSFacilePeso compresso: Demo 4,4 KBGSAP + CustomEase 31 KBGratisScarica lo zip

Tre pulsanti a pillola che rispondono come la gomma: sotto il puntatore la scritta si allarga sull’asse della larghezza del carattere e si fa più spessa, il fondo si gonfia oltre la sua misura e torna indietro con un rimbalzo, e una pressione lo schiaccia, più largo e più basso, prima di rilanciarlo su una molla.

Il codice

Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The elastic button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the buttons: the label widens on the typeface's width axis, the fill swells with a bounce, a press squashes it.
         The wide label is already measured by an invisible copy, so nothing around them ever moves -->
    <div class="buttons" data-buttons>
      <a class="elastic elastic--ink" href="#" data-elastic>
        <span class="elastic__fill" aria-hidden="true"></span>
        <span class="elastic__label" data-label="Get started"><span class="elastic__text">Get started</span></span>
        <svg class="elastic__icon elastic__icon--arrow" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg>
      </a>
      <a class="elastic elastic--accent" href="#" data-elastic data-autoclic>
        <span class="elastic__fill" aria-hidden="true"></span>
        <span class="elastic__label" data-label="Read the guide"><span class="elastic__text">Read the guide</span></span>
        <svg class="elastic__icon elastic__icon--page" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 3.5h7.5L19 8v12.5H7zM14.5 3.5V8H19M10 12.5h6M10 16h6"/></svg>
      </a>
      <a class="elastic elastic--ghost" href="#" data-elastic>
        <span class="elastic__fill" aria-hidden="true"></span>
        <span class="elastic__label" data-label="Send a gift"><span class="elastic__text">Send a gift</span></span>
        <svg class="elastic__icon elastic__icon--gift" viewBox="0 0 24 24" aria-hidden="true"><path d="M4.5 10h15v10h-15zM3.5 7h17v3h-17zM12 7v13M12 7c-1.2-2.6-4.9-3.6-5.4-1.5C6.2 7.2 9.5 7 12 7zm0 0c1.2-2.6 4.9-3.6 5.4-1.5.4 1.7-2.9 1.5-5.4 1.5z"/></svg>
      </a>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.

21 valori da cambiare

Apri il Playground

Oppure chiedila a Claude Code

Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:

Prendi «Il pulsante elastico» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Tre pulsanti a pillola su un fondo bianco: Get started, scuro con una freccia; Read the guide, color ruggine con un foglio; Send a gift, col solo contorno e un pacco regalo. Quando il puntatore entra in un pulsante, la scritta si allarga fino al 122% della sua larghezza e passa dal peso 620 al 720, con una curva che va oltre e torna indietro; il fondo si gonfia del 6% con la stessa curva e sotto gli cresce un’ombra morbida, come se si alzasse dalla pagina. Intanto la freccia avanza di 5 pixel, il foglio si inclina di 10 gradi e il pacco di 8. Premendo, il fondo si schiaccia in 0,12 secondi, il 4% più largo e il 10% più basso; lasciando, torna alla sua misura con una molla elastica. Il pulsante non spinge mai niente intorno a sé, perché tiene già il posto per la scritta alla sua larghezza massima. Sul telefono un tocco fa lo stesso, e la scritta resta larga per un attimo, così il dito la vede. All’arrivo i pulsanti saltano fuori uno dopo l’altro con lo stesso rimbalzo.

Come funziona

La scritta che si allarga

Mona Sans è un carattere variabile con un asse della larghezza, da 75 a 125. Sotto il puntatore la scritta passa da font-stretch 100% a STRETCH e dal peso WEIGHT[0] al WEIGHT[1] con una transizione CSS di TIME secondi. La curva è BOUNCE, un cubic-bezier col secondo numero sopra 1: porta la scritta oltre la sua larghezza e la riporta indietro. Lo script scrive questi valori in variabili CSS, così il foglio di stile li usa senza ripeterli.

Il posto per la scritta larga

Accanto alla scritta c’è una sua copia, fatta con ::before e attr(data-label), già alla larghezza e al peso massimi, alta zero pixel e invisibile. Le due stanno nella stessa cella di una griglia: il pulsante è largo da subito quanto lo sarà al massimo, e allargarsi non sposta né lui né i pulsanti vicini.

Il fondo che si gonfia

Il fondo è uno strato a parte dietro la scritta, così si può gonfiare senza deformarla. GSAP lo porta a INFLATE in TIME secondi con la stessa curva della scritta, trasformata in una CustomEase. Quando il pulsante è acceso, sotto il fondo cresce un’ombra, con una transizione CSS.

La pressione

Premere schiaccia il fondo di SQUASH, più largo e più basso, in 0,12 secondi, partendo dalla misura che ha in quel momento. Lasciare lo rimanda alla sua misura in 0,9 secondi con un elastic.out di forza e tempo RELEASE. I tween usano overwrite: 'auto', così una pressione interrompe pulito il fondo che si sta gonfiando.

Dito e tastiera

Il mouse accende il pulsante quando ci entra e lo spegne quando esce. Un dito non ha un «sopra»: il tocco accende e preme insieme, e dopo averlo lasciato il pulsante resta acceso PULSE secondi. Con il tasto Tab il pulsante si accende quando ci si arriva (solo con :focus-visible, non dopo un clic) e Invio lo preme. Un clic che non arriva né da un puntatore né dalla tastiera, per esempio da un altro script, riceve la stessa risposta di un tocco.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`STRETCH`	script.js	`122`	Quanto si allarga la scritta, in percentuale della sua larghezza (il carattere va da 75 a 125).
`WEIGHT`	script.js	`[620, 720]`	Il peso della scritta a riposo e quando il pulsante è acceso.
`INFLATE`	script.js	`1.06`	Quanto si gonfia il fondo quando il pulsante è acceso.
`TIME`	script.js	`0.6`	I secondi della gonfiata e dell’allargamento.
`BOUNCE`	script.js	`[0.34, 1.9, 0.45, 1]`	La curva di entrambi, come un cubic-bezier: un secondo numero sopra 1 va oltre e torna.
`SQUASH`	script.js	`[1.04, 0.9]`	Il fondo sotto una pressione: quanto più largo e quanto più basso.
`RELEASE`	script.js	`[1, 0.35]`	La molla quando la pressione finisce: la sua forza e quanto in fretta si ferma.
`PULSE`	script.js	`0.45`	Dopo un tocco col dito, i secondi in cui la scritta resta larga.

Provali nel Playground

Quando usarla

Per il pulsante principale di una pagina, o per una fila di due o tre azioni di colori diversi: comprare, scoprire, regalare. Serve un carattere variabile con l’asse della larghezza (Mona Sans, Roboto Flex, Anybody): con un carattere fisso la scritta non si allarga e resta solo il fondo.

Sul telefono

I pulsanti vanno uno sotto l’altro e sono un po’ più bassi. Il tocco accende e preme il pulsante insieme; la scritta resta larga per un attimo dopo il tocco, poi torna.

Con il movimento ridotto

Niente allargamento e niente gonfiata: la scritta resta com’è e il fondo non si muove. Rispondono solo il colore, un po’ più chiaro sul pulsante scuro e più scuro su quello color ruggine, e l’ombra sotto.

Trappole

La larghezza va scelta dentro l’asse del carattere: Mona Sans va da 75 a 125, e oltre il browser si ferma all’ultimo valore. Con un altro carattere va cambiato anche STRETCH.
Senza la copia invisibile, allargare la scritta allarga il pulsante, e in una fila di pulsanti centrati si spostano anche gli altri a ogni passaggio del puntatore.
Il fondo va gonfiato da solo: scalando tutto il pulsante si scalerebbe anche la scritta, che si sta già allargando per conto suo. Per questo il fondo è uno strato a parte, con z-index −1 e isolation sul pulsante.
Su un pulsante toccato col dito l’accensione dura quanto la pressione, un attimo: il ritardo PULSE serve a far vedere la scritta larga.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,4 KB; le librerie: GSAP + CustomEase 31 KB.

Collaudo

Provata il 2 ottobre 2026

Computer: Fatto
Telefono: Fatto
Movimento ridotto: Fatto
Safari su iPhone: Fatto

Licenza d’uso

Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.