Il pulsante col peso sotto il dito

Pulsanti, Hover, TestoGSAP, Solo CSSImpegnativaPeso compresso: Demo 8,2 KBGSAP 28 KBGratisScarica lo zip

Il pulsante Book a call di uno studio, nello stile minimal: una pillola a filo con la scritta leggera. Sotto il puntatore le lettere prendono peso come sotto una lente, ognuna sulla sua molla, e la pillola si allarga quanto serve alle lettere più grosse, col contorno che si ispessisce con loro. Premuto, tutte le lettere diventano pesanti in un’onda che parte dal punto premuto e la pillola cede di un pixel; poi la scritta si assottiglia fino a un filo, arriva Booked con una spunta blu disegnata, e il pulsante torna.

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 button with weight under the finger</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/grad.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the frame keeps the room of the widest the pill can get, so the preview never has to move -->
    <div class="frame" data-frame>
      <!-- the button: a hairline pill with a light label. Under the pointer the letters take weight as under a lens,
           each on its own spring, and the pill widens as much as the heavier letters need. The letters, the outline
           and the tick are set by the script on every frame -->
      <button class="call" type="button" aria-label="Book a call" data-call data-autoclic>
        <span class="call__pill" aria-hidden="true" data-pill></span>
        <span class="call__line" aria-hidden="true" data-line>
          <svg class="call__tick" viewBox="0 0 20 20" data-tick><path d="M4.4 10.4l3.7 3.7 7.6-8" pathLength="1" data-tick-path/></svg>
        </span>
      </button>
    </div>
    <p class="sr" role="status" aria-live="polite" data-said></p>
    <!-- a hidden copy of the type, to measure every letter at every weight -->
    <div class="ruler" aria-hidden="true" data-ruler></div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.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.

18 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 col peso sotto il dito» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco c’è solo una pillola alta 60 pixel, bianca, con un contorno nero di un pixel e la scritta Book a call in Roboto Flex, leggera, al peso 340. All’apertura la scritta sale da un filo sottilissimo, una lettera dopo l’altra dal centro verso i lati, e ogni lettera prende per un attimo un po’ più di peso prima di posarsi. Col mouse sopra il pulsante le lettere prendono peso come sotto una lente: quella proprio sotto il puntatore arriva quasi a 860, le vicine un po’ meno, le lontane restano leggere, e muovendo il mouse la lente scorre lungo la parola. Ogni lettera raggiunge il suo peso con una molla sua, smorzata, che va appena oltre e torna, così una passata lascia dietro di sé un’onda che si assesta una lettera dopo l’altra. Le lettere più pesanti sono anche più larghe: la pillola si allarga quanto serve, su una molla anche lei, e il suo contorno si fa un pelo più spesso. Premendo, tutte le lettere diventano pesanti, prima quelle vicine al punto premuto e poi le altre, la pillola si allarga ancora, il contorno arriva a due pixel e la pillola si schiaccia di un pixel. Lasciando, la chiamata è prenotata: dallo stesso punto la scritta si assottiglia fino a un filo e svanisce, la pillola si stringe sulla parola nuova, davanti si disegna una spunta blu che poi prende peso anche lei, e Booked sale dal filo in un’onda che parte dalla spunta. Dopo un momento la parola torna Book a call nello stesso modo. Sul telefono la lente cade dove tocca il dito, e l’onda di peso parte da lì.

Come funziona

Il carattere misurato una volta

Roboto Flex è un carattere variabile con l’asse del peso da 100 a 1000, e cambiando peso le lettere si allargano. All’avvio un righello nascosto scrive ogni lettera delle due parole a dieci pesi e ne misura l’avanzamento con getBoundingClientRect; l’avanzamento a un peso qualsiasi si ricava interpolando fra i due vicini. Le lettere sono elementi separati e perdono la crenatura: le coppie (Bo, ok, ca…) si misurano su un canvas nello stesso carattere, ab meno a meno b, e si rimettono a mano.

La lente

La lente è una campana di Gauss intorno al puntatore, larga LENS pixel: ogni lettera vuole il peso WEIGHT[0] più la parte di WEIGHT[1] che la campana le dà alla distanza del suo centro dal puntatore. L’intensità della lente è un numero che GSAP porta a 1 quando il puntatore entra e a 0 quando esce, così la lente si accende e si spegne senza scatti.

Una molla per lettera

Ogni lettera non salta al peso che vuole: è una molla smorzata sull’asse del peso, con rigidezza e smorzamento in SPRING, integrata a mezzo passo con il passo di tempo limitato a 1/30 di secondo. Sotto 1 lo smorzamento lascia andare il peso appena oltre e lo riporta indietro; e siccome ogni lettera ha la sua molla, una passata veloce lascia un’onda che si assesta lettera per lettera.

La riga e la pillola

A ogni fotogramma una funzione sul ticker di GSAP somma gli avanzamenti delle lettere al loro peso del momento, con le coppie, centra la riga e mette ogni lettera al suo posto con un translate3d e la sua font-variation-settings. La pillola è larga quanto la riga più il margine, ma la segue su una seconda molla (PILL); premendo cede di SQUASH pixel in altezza e li prende in larghezza. Il contorno è un box-shadow interno che va da OUTLINE[0] a OUTLINE[1] con il peso medio delle lettere. Quando molle e tween sono fermi il ticker si toglie da solo.

L’onda della pressione

Premendo, ogni lettera riceve un tween della sua pressione verso 1, in ritardo della sua distanza dal punto premuto divisa per WAVE: un’onda di peso che parte da lì. Al rilascio la stessa onda, dallo stesso punto, porta il peso di riposo fino al filo, 100, e spegne le lettere; poi arriva Booked: la spunta si disegna con stroke-dashoffset e il suo tratto si ispessisce con un back.out, e le lettere salgono dal filo in un’onda che parte dalla spunta, ognuna con un colpetto di peso quando si posa. Dopo HOLD secondi torna Book a call, dal centro.

Dito, tastiera e movimento ridotto

Un dito non ha un sopra: la lente cade dove tocca e l’onda parte da lì. Con il tasto Tab la lente si accende al centro e c’è un anello blu; Invio o Spazio premono. Con il movimento ridotto il peso non cambia e lavora l’asse GRAD, la gradazione, che ispessisce le lettere senza allargarle: niente si sposta, e le parole cambiano con una dissolvenza.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORDS`	script.js	`['Book a call', 'Booked']`	Le due parole: a riposo, e a chiamata prenotata (con la spunta davanti).
`WEIGHT`	script.js	`[340, 860]`	Il peso delle lettere a riposo, e sotto la lente o la pressione (Roboto Flex va da 100 a 1000).
`LENS`	script.js	`21`	Il raggio della lente in pixel: quante lettere pesa insieme.
`SPRING`	script.js	`[300, 0.58]`	La molla di ogni lettera: la rigidezza e lo smorzamento (sotto 1 va appena oltre e torna).
`PILL`	script.js	`[420, 0.7]`	La molla della pillola, con gli stessi due numeri.
`WAVE`	script.js	`520`	La velocità dell’onda di peso che parte dal punto premuto, in pixel al secondo.
`HOLD`	script.js	`1.8`	I secondi in cui resta Booked prima che il pulsante torni.
`OUTLINE`	script.js	`[1, 2]`	Il contorno della pillola in pixel, con le lettere leggere e con tutte pesanti.
`SQUASH`	script.js	`1`	I pixel di cui la pillola cede sotto la pressione.

Provali nel Playground

Quando usarla

Per il pulsante principale del sito di uno studio, di un consulente o di un fotografo: prenotare una chiamata, chiedere un preventivo, scrivere. Sta bene su una pagina chiara e vuota, dove una scritta leggera e un filo bastano. Serve un carattere variabile con un asse del peso ampio: con un carattere fisso resta solo la pillola.

Sul telefono

La pillola è la stessa, alta 60, e sta comoda nei 390 pixel anche con tutte le lettere pesanti. Senza puntatore la lente cade dove tocca il dito, l’onda di peso parte da lì e il tocco fa partire il giro intero, con le stesse animazioni del computer.

Con il movimento ridotto

Il peso non cambia e quindi le lettere non si spostano mai: sotto il puntatore e alla pressione l’asse GRAD le ispessisce tutte insieme restando della stessa larghezza, con una dissolvenza. Le parole cambiano sfumando, e la spunta compare già disegnata.

Trappole

Sotto la lente le lettere più pesanti si allargano: senza la riga ricalcolata a ogni fotogramma dai numeri misurati, le lettere vicine si sarebbero sovrapposte o la parola avrebbe tremato misurandola con il browser a ogni passo.
Nella prima prova le lettere sfumavano mentre erano ancora pesanti, e il filo non si vedeva: la scritta spariva grigia e grossa. Ora ogni lettera prima si assottiglia fino a 100 e solo dopo 0,22 secondi comincia a sfumare; e la spunta si disegna con un power2.out, così compare subito e la pillola resta vuota solo per un attimo.
index.css di Fontsource carica solo l’asse del peso; per il movimento ridotto serviva anche la gradazione, quindi il carattere arriva da grad.css, che ha wght e GRAD in un file solo di 57 KB invece dei 326 di full.css.
Un clic da tastiera arriva con detail uguale a 0, come quello da script dell’anteprima: per distinguerli il pulsante si segna il tasto premuto, e solo un clic da script senza tasto fa partire il giro dimostrativo.
Un ticker che si spegne quando niente si muove non vede partire i tween in ritardo dell’onda: ogni tween e ogni timeline lo risvegliano dal loro onUpdate.

Librerie

GSAP 3.15.0, Roboto Flex (font variabile, con gli assi del peso e della gradazione) 5.3.0.

Compressi con gzip, i tre file della demo pesano 8,2 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 16 ottobre 2026

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

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.