Il suggerimento che segue
Suggerimenti, Hover, Fisica
NuovaGratis
Tutti i componenti
Il pulsante a strati
Sotto il pulsante ci sono tre copie di lui: quando il puntatore si avvicina si aprono a scala dal lato opposto e lo seguono mentre si muove, ognuna un po’ in ritardo e un po’ più molle di quella sopra; premuto, il pulsante affonda e la pila si chiude.
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 layered button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the buttons: each one has three copies of itself underneath. As the pointer comes near they open into a stair
on the side away from it, each copy a little later than the one above; a press pushes the button down into
them -->
<div class="buttons" data-buttons>
<button class="stack stack--colour" type="button" data-stack>
<span class="stack__layer" aria-hidden="true"></span>
<span class="stack__layer" aria-hidden="true"></span>
<span class="stack__layer" aria-hidden="true"></span>
<span class="stack__face">Let’s talk<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13M13 6.5l5.5 5.5-5.5 5.5"/></svg></span>
</button>
<button class="stack stack--paper" type="button" data-stack>
<span class="stack__layer" aria-hidden="true"></span>
<span class="stack__layer" aria-hidden="true"></span>
<span class="stack__layer" aria-hidden="true"></span>
<span class="stack__face">See the work</span>
</button>
</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.
12 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 a strati» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco due pulsanti a rettangolo arrotondato con un bordo nero spesso: uno giallo, Let’s talk con una freccia, con sotto tre copie rosa, blu e nera; uno bianco, See the work, con tre copie bianche come fogli di carta. A riposo delle copie si vedono solo i bordi, una scaletta sottile in basso a destra. Quando il puntatore si avvicina (da 150 pixel) la pila si apre: le copie escono a gradini dal lato opposto al puntatore e gli girano intorno mentre si muove, la più vicina subito e la più lontana per ultima, con un’oscillazione da molla, mentre il pulsante si alza un poco verso il puntatore. Premuto, il pulsante affonda nelle copie e la pila si chiude; lasciato, si riapre con un’oscillazione. Col tasto Tab la pila si apre verso il basso a destra; sul telefono un tocco la apre dal lato opposto al dito, la preme e poi la lascia chiudere. All’apertura le due pile si aprono una volta e si richiudono.
Come funziona
Le copie
Il pulsante contiene tre span vuoti con la sua stessa forma, messi dietro di lui con z-index, e la faccia con la scritta. Il bordo nero è un box-shadow inset, così tutte le copie hanno esattamente il suo bordo.
La scala
Un numero dice quanto sono distanti le copie (REST a riposo, GAP aperte, zero premute) e un vettore la direzione, lontano dal puntatore. Ogni strato va a (posto − 0,6) volte la distanza lungo quella direzione: la faccia, posto zero, va un poco verso il puntatore, e le copie, posti da 1 a 3, verso il lato opposto.
Il campo del puntatore
A ogni movimento si misura la distanza fra il puntatore e il rettangolo del pulsante: da REACH pixel a zero la pila si apre con una curva morbida. La direzione è quella dal puntatore al centro del pulsante, con un po’ di basso a destra, e più il puntatore è lontano più torna al basso a destra.
Le molle
Ogni strato è appeso a una molla verso il suo posto, mossa a mano sul ticker di GSAP a passi di 4 millisecondi al massimo: la rigidità della faccia è SPRING[0], ogni copia sotto è più molle di LAG, e lo smorzamento è SPRING[1]. Premendo, la molla della faccia diventa quattro volte più rigida, così il pulsante affonda subito.
Tastiera e dito
Col focus dal tasto Tab la pila si apre verso il basso a destra, e Invio o Spazio danno una pressione breve da soli. Un dito apre la pila al pointerdown, dal lato opposto al tocco, e la lascia richiudere mezzo secondo dopo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GAP | script.js | 7 | Lo spazio fra due copie quando la pila è aperta, in pixel. |
REST | script.js | 1.6 | Lo spazio a riposo. |
REACH | script.js | 150 | Da quanto lontano il puntatore comincia ad aprire la pila, in pixel. |
SPRING | script.js | [420, 0.58] | La molla del pulsante: quanto è rigida, e quanto si calma (1 = senza oscillare). |
LAG | script.js | 0.45 | Quanto è più molle la molla di ogni copia di quella sopra. |
Quando usarla
Per il pulsante principale di un sito con un carattere giocoso, grafico o un po’ rétro: uno studio, un portfolio, un negozio, un evento. Sta bene con colori pieni e bordi netti.
Sul telefono
I pulsanti vanno a capo se lo schermo è stretto. Un tocco apre la pila dal lato opposto al dito, la preme e la lascia chiudere; senza puntatore la pila a riposo resta in basso a destra.
Con il movimento ridotto
Niente molle e niente campo: la pila si apre di colpo solo col puntatore sopra il pulsante, sempre verso il basso a destra, e si chiude di colpo sotto la pressione.
Trappole
- La distanza va misurata dal rettangolo del pulsante, non dal suo centro: per un pulsante largo il puntatore sopra un’estremità risulterebbe già lontano.
- Con una molla rigida e un fotogramma lento il calcolo esplode: per questo il passo è diviso in pezzi di 4 millisecondi al massimo.
- Il rettangolo si legge dal pulsante, che non si sposta mai: si spostano solo la faccia e le copie dentro di lui, così la misura non insegue sé stessa.
- L’apertura non usa :hover ma pointermove sulla finestra: così la pila si apre già prima che il puntatore arrivi sopra il pulsante.
Librerie
GSAP 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 4,1 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 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.
