Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
Il pulsante che si giustifica come una colonna di testo
Nello stile minimal, su bianco e di sola tipografia: il Read the essay di una piccola rivista, scritto su tre righe a bandiera, una a sinistra, una a destra e una al centro, come una prova d’impaginazione. Sotto il puntatore le righe scivolano e si giustificano in un blocco perfetto: ogni parola si allarga sull’asse della larghezza fino alla stessa misura, ai lati salgono due filetti di margine e la pillola si stringe intorno al blocco. Premuto, il blocco si chiude in una riga sola e una freccia vermiglia avanza.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The button that justifies itself</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the button that justifies itself: the Read the essay of a small review, on white. The words sit on three
ragged lines, set left, right and centre like a typesetting proof. Under the pointer the three lines slide
and justify into one perfect block, every word widened on the width axis to the same measure, and the pill
tightens round it. Pressed, the block closes into one line and a drawn arrow steps forward -->
<div class="just" data-just>
<p class="just__brand">Ostrom Review</p>
<button class="just__btn" type="button" data-btn data-autoclic aria-label="Read the essay">
<span class="just__guide just__guide--l" data-guide aria-hidden="true"></span>
<span class="just__guide just__guide--r" data-guide aria-hidden="true"></span>
<span class="just__stack" data-stack aria-hidden="true"></span>
<span class="just__single" data-single aria-hidden="true">
<span class="just__row" data-row></span>
<svg class="just__arrow" viewBox="0 0 24 14" data-arrow><path d="M1.5 7h19M15 1.8 20.6 7 15 12.2" data-arrow-path></path></svg>
</span>
</button>
<p class="just__note" data-note>Autumn issue · 12 min read</p>
<p class="sr" aria-live="polite" data-live></p>
</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.
16 valori da cambiare
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 che si giustifica come una colonna di testo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco, sotto il nome piccolo Ostrom Review, una pillola alta col contorno grigio chiarissimo; dentro, in Archivo, le tre parole Read, the, essay su tre righe a bandiera: la prima allineata a sinistra, la seconda a destra, la terza al centro, ognuna larga quanto è. Sotto la pillola la riga piccola Autumn issue · 12 min read. Passandoci sopra il contorno diventa nero e le righe si giustificano su una molla: ognuna scivola a sinistra e si allarga fino alla stessa misura, prima sull’asse della larghezza del carattere e, quando l’asse finisce, con lo spazio fra le lettere; il blocco arriva un poco oltre e si posa, ai due lati salgono due filetti sottili di margine e la pillola si stringe di qualche pixel intorno al blocco. Premuta, la pillola cede e torna con un rimbalzo, le tre righe si chiudono verso quella di mezzo e spariscono, la pillola diventa bassa e larga e dentro arriva una riga sola, Read the essay, parola per parola, con una freccia vermiglia che si disegna e fa un passo avanti; la riga sotto diventa vermiglia e dice Opening the essay. Dopo un attimo il pulsante torna alle sue righe a bandiera.
Come funziona
Ogni parola misurata otto volte
Quando il carattere è arrivato, lo script misura ogni parola a otto punti dell’asse della larghezza di Archivo, da 62 a 125, con un elemento nascosto. Così per dare a una parola una larghezza qualsiasi basta leggere la tabella al contrario: si trova il valore dell’asse fra due misure vicine, in proporzione.
Giustificare con l’asse e con lo spazio
La misura del blocco è la parola più lunga per MEASURE. Un solo numero, p, va da 0 (a bandiera) a 1 (giustificato): per ogni riga la larghezza voluta è la sua naturale più (misura − naturale) per p. L’asse dà quello che può; quello che manca diventa spazio fra le lettere, diviso fra le lettere meno una, così l’ultima lettera finisce proprio sul margine. Anche la posizione va da quella a bandiera al margine sinistro con p.
La molla
GSAP porta p a 1 con back.out(1.7): passa un poco oltre, le parole si allargano per un istante più del margine e tornano. Con p salgono anche i due filetti di margine, in scala verticale, e la pillola si stringe di SHRINK pixel.
La riga sola
Al clic le righe scendono e salgono verso quella di mezzo e spariscono, mentre GSAP porta la pillola dalle misure del blocco a quelle della riga sola con back.out; le tre parole della riga entrano una dopo l’altra, la freccia si disegna col dashoffset e fa un passo avanti e indietro. Dopo HOLD secondi tutto torna.
Accessibile
È un button vero, con l’etichetta Read the essay letta per intero; una riga aria-live dice Opening the essay. Col movimento ridotto le righe passano subito giustificate sotto il puntatore e al clic le due forme si scambiano in dissolvenza.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Read|the|essay | Le parole del pulsante, una per riga, divise da |. |
NOTE | script.js | Autumn issue · 12 min read | La riga piccola sotto la pillola. |
NOTE_DONE | script.js | Opening the essay | La riga piccola mentre si apre il saggio. |
ALIGN | script.js | left|right|center | Come sono messe le righe a bandiera a riposo, una per riga. |
MEASURE | script.js | 1.16 | Quanto è largo il blocco giustificato, rispetto alla parola più lunga. |
JUSTIFY | script.js | 0.6 | I secondi in cui le righe si giustificano. |
SHRINK | script.js | 5 | Di quanto si stringe la pillola intorno al blocco, in pixel. |
HOLD | script.js | 1.3 | I secondi in cui resta la riga sola prima di tornare. |
Quando usarla
Per il pulsante che apre un testo lungo: il Leggi di un articolo o di un saggio, il Continua di un blog, l’indice di una rivista, la pagina di una casa editrice o di una fonderia di caratteri.
Sul telefono
Le misure si rifanno sulla grandezza del carattere, che segue la larghezza e l’altezza dello schermo; il tocco fa tutto il giro, giustificazione compresa, perché senza mouse non c’è il passaggio.
Con il movimento ridotto
Le righe sono subito giustificate sotto il puntatore, senza molla; al clic il blocco e la riga sola si scambiano in dissolvenza.
Trappole
- La larghezza di una parola non cresce in modo proporzionale con l’asse: per questo si misura a otto punti e si legge la tabella, invece di calcolarla con una formula.
- Lo spazio fra le lettere si mette anche dopo l’ultima: diviso fra le lettere meno una, l’ultima lettera finisce sul margine e lo spazio in più resta fuori, invisibile.
- Le misure vanno rifatte quando arriva il carattere (document.fonts.ready) e a ogni ridimensionamento: misurate col carattere di riserva, le righe giustificate uscirebbero dal margine.
- La pillola ha larghezza e altezza scritte dallo script: lasciata al contenuto, salterebbe a ogni fotogramma mentre le parole si allargano.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,3 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 24 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.
