Il pulsante elastico
Pulsanti, Hover, Testo
NuovaGratis
Tutti i componenti
Il pulsante impresso a secco
Nello stile minimal, su bianco: il Join the list di una stamperia, una pillola fatta solo di parole e di una riga di un pixel. Premuta, la carta sprofonda nella pillola come un’impressione a secco, a partire dal punto esatto in cui la tocchi: un foglio appena più scuro con le ombre morbide della pressa si apre in cerchio, un anello sottile di pressione corre avanti, e On the list resta impresso nella carta, con un filo scuro sopra e uno chiaro sotto ogni lettera. Premuta di nuovo, la carta risale con una molla e un pixel di troppo.
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 blind pressed button</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 blind pressed button: a hairline pill on white paper, made only of words and a line. Pressed, the paper
sinks into it like a blind deboss, starting from the point you press and spreading out; the new words are
pressed into the paper. Pressed again, the paper rises back with a spring -->
<div class="press" data-press>
<p class="press__brand">Mardale Press</p>
<button class="press__btn" type="button" data-btn data-autoclic aria-pressed="false">
<span class="press__face" data-face>
<span class="press__word" data-rest>Join the list</span>
</span>
<span class="press__sunk" data-sunk aria-hidden="true">
<span class="press__word press__word--sunk" data-done>On the list</span>
</span>
</button>
<p class="press__note" data-note>Letterpress cards, one issue a season</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.
20 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 impresso a secco» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco il nome piccolo Mardale Press, sotto una pillola larga circa 300 pixel fatta di un contorno grigio chiaro di un pixel e delle parole Join the list in Archivo, e sotto ancora la riga Letterpress cards, one issue a season. Passandoci sopra il contorno diventa nero e la scritta si allarga sull’asse della larghezza con una molla. Premuta, la pillola scende di due pixel e risale piano; dal punto esatto del clic si apre un cerchio di carta appena più scura, con le ombre interne della pressa (scure in alto, chiare in basso) e una grana fine, e davanti al bordo del cerchio corre un anello sottile che si spegne arrivando agli angoli. Dentro la carta pressata c’è On the list, impresso: le lettere hanno il colore della carta, un filo scuro sopra e uno chiaro sotto. La riga piccola diventa vermiglia e dice The winter issue ships in December. Premuta di nuovo, la carta si richiude verso il nuovo punto, la pillola sale di un pixel oltre il piano e si posa.
Come funziona
Due strati e un cerchio
Il pulsante ha due strati uno sopra l’altro: la faccia, col contorno e Join the list, e la carta pressata, con le ombre interne, la grana e On the list. La carta pressata è tagliata da un clip-path circle che parte dal punto del clic con raggio zero; GSAP porta un numero da 0 a 1 e il raggio va fino all’angolo più lontano della pillola, così il cerchio la copre sempre tutta.
Le lettere impresse
Le parole pressate hanno quasi il colore della carta e due ombre: una scura di un pixel sopra e una chiara di un pixel sotto. È il trucco delle lettere incise: la luce arriva dall’alto, il bordo di sopra resta in ombra e quello di sotto prende la luce.
L’anello di pressione
Un cerchio col bordo di un pixel segue il bordo del taglio: stessa misura, stesso centro. La sua opacità è il seno dell’avanzamento, quindi nasce, si vede a metà e si spegne arrivando agli angoli.
Giù e su
Premendo, la pillola scende di SINK pixel in 0,11 secondi e risale con elastic.out restando un poco giù, come la carta pressata. Togliendo la pressione, il cerchio si richiude verso il nuovo punto, poi la pillola sale di OVERSHOOT pixel sopra il piano e si posa con una molla.
Accessibile
È un button vero con aria-pressed; una riga aria-live annuncia On the list; da tastiera il cerchio parte dal centro. Mentre la carta si muove i clic si ignorano. Col movimento ridotto la carta pressata compare e sparisce in dissolvenza, senza cerchio né molle.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | Join the list | Le parole a riposo. |
DONE | script.js | On the list | Le parole impresse nella carta. |
NOTE | script.js | Letterpress cards, one issue a season | La riga piccola sotto la pillola. |
NOTE_DONE | script.js | The winter issue ships in December | La riga piccola a pulsante premuto. |
SPREAD | script.js | 0.9 | I secondi in cui l’impressione si allarga dal punto premuto. |
SINK | script.js | 2 | Quanto scende la pillola quando la premi, in pixel. |
OVERSHOOT | script.js | 1 | Quanto sale oltre il piano la carta quando torna su, in pixel. |
WIDEN | script.js | 112 | Quanto si allargano le parole sotto il puntatore (asse della larghezza di Archivo). |
Quando usarla
Per un pulsante d’iscrizione o di conferma che deve sembrare fatto di carta: la newsletter di una stamperia o di una cartoleria, l’iscrizione a una rivista, la conferma di un invito di nozze, la prenotazione di un laboratorio.
Sul telefono
La pillola si stringe fino al 64% della larghezza e si abbassa con l’altezza della finestra; il tocco fa partire il cerchio dal punto toccato come il clic. L’allargamento delle parole c’è solo col mouse.
Con il movimento ridotto
La carta pressata compare e sparisce in dissolvenza, senza cerchio, senza anello e senza molle; la riga piccola cambia in dissolvenza.
Trappole
- Il raggio del cerchio va calcolato fino all’angolo più lontano dal punto del clic, non fino al centro: premendo vicino a un bordo, un raggio pari a metà larghezza lasciava scoperto il lato opposto.
- Le lettere impresse vanno quasi del colore della carta pressata: troppo chiare non si leggono, troppo scure sembrano stampate a inchiostro e l’effetto del secco sparisce.
- La pillola cambia misura con la finestra: un ResizeObserver riporta il punto del clic in proporzione e ridisegna il cerchio, altrimenti dopo una rotazione del telefono il taglio restava storto.
- Il clic da tastiera ha le coordinate a zero (detail 0): il cerchio deve partire dal centro, non dall’angolo in alto a sinistra.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,8 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.
