Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il pulsante adesivo
Un adesivo fustellato da staccare dall'angolo: tirato, si piega su sé stesso lungo una linea a metà strada fra l'angolo e la mano e mostra il retro, e lasciato presto torna giù con un rimbalzo. Tirato abbastanza, o toccato una volta, si stacca del tutto e cade girando, e sotto c'è il codice da copiare; Stick it back ne rimette uno nuovo.
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 sticker button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sour-gummy@5.3.0/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/google-sans-code@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the sticker button: a die-cut sticker that peels from its corner, folding back over itself; peeled off, it
falls away and the code printed underneath is there to copy -->
<div class="peel" data-peel data-autoclic>
<div class="peel__spot" data-spot>
<div class="peel__under" data-under>
<span class="peel__off">20% off your first order</span>
<span class="peel__code" data-code>SPRING20</span>
<button class="peel__copy" type="button" tabindex="-1" data-copy>Copy code</button>
</div>
<svg class="peel__art" aria-hidden="true" data-art>
<text class="peel__label" data-label>Peel for 20% off</text>
</svg>
<button class="peel__hit" type="button" aria-label="Peel for 20% off" data-hit></button>
</div>
<div class="peel__row">
<p class="peel__hint"><span data-hint>Pull the corner, or just tap</span></p>
<button class="peel__back" type="button" hidden data-back>Stick it back</button>
</div>
<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.
18 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 adesivo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco un adesivo corallo con gli angoli tondi, il bordo bianco della fustella e la scritta Peel for 20% off; l'angolo in basso a destra è appena sollevato e lascia vedere il retro color crema. Sotto, la riga Pull the corner, or just tap. All'arrivo l'adesivo sale dal basso e l'angolo si alza e ricade. Il mouse vicino all'angolo lo solleva di più quanto più è vicino. Tirando l'angolo l'adesivo si piega: la parte oltre la piega si gira e mostra il retro, più chiaro vicino alla piega, con un'ombra sotto, e la piega getta un'ombra morbida sulla parte ancora attaccata. Lasciato prima di metà strada torna giù con un rimbalzo; tirato oltre, si stacca del tutto, cade girando verso sinistra e svanisce. Sotto c'erano 20% off your first order, il codice SPRING20 e il pulsante Copy code; la riga dice Your code is ready e compare Stick it back. Copy code copia il codice e diventa Copied per un momento. Stick it back fa scendere un adesivo nuovo dall'alto, un po' girato, che si raddrizza e viene premuto con un piccolo rimbalzo.
Come funziona
Una piega è una riflessione
Il contorno dell'adesivo è un rettangolo tondo fatto di 36 punti. La piega è la linea a metà strada fra l'angolo e il punto in cui è stato tirato, perpendicolare a loro: il contorno si taglia lungo quella linea, la parte dalla parte dell'angolo si riflette sull'altra (ogni punto meno due volte la sua distanza dalla linea) e diventa il lembo girato, mentre il resto si mostra con un clip-path, così anche la scritta viene tagliata.
Il retro e le ombre
Il lembo è riempito da una sfumatura che parte bianca sulla piega e diventa crema allontanandosi, e ha la sua ombra (feDropShadow); sulla parte ancora attaccata una fascia di 22 pixel lungo la piega va da scuro al 24% a trasparente. Tutte le sfumature si rimettono a ogni fotogramma sulla piega nuova.
La mano
Il pulsante sopra l'adesivo cattura il puntatore: l'angolo segue la mano mantenendo la distanza dal punto afferrato, ma solo verso l'interno e non oltre 2,2 volte la diagonale. Spostarsi meno di 6 pixel è un tocco. Lasciando, se l'angolo ha fatto almeno GIVE della diagonale l'adesivo si stacca, altrimenti torna a 16 pixel di sollevamento con elastic.out(1, BOUNCE). Il mouse a meno di 120 pixel dall'angolo lo solleva fino a PEEK pixel in più, con quickTo.
Il distacco
Per staccarsi l'angolo va fino a 2,12 volte la diagonale, dove la piega ha attraversato tutto l'adesivo. Poi l'adesivo cade di 520 pixel con power2.in nel tempo di una caduta con gravità FALL, girando di 38 gradi e spostandosi di 60 pixel a sinistra, e svanisce nella seconda metà. Solo allora Copy code entra nel giro del tasto Tab e Stick it back si mostra.
Tasti, appunti e anteprima
Invio e Spazio sul pulsante staccano l'adesivo in un colpo; il clic che segue una mano si salta, o un trascinamento lo staccherebbe due volte. Copy code usa navigator.clipboard.writeText; con i tasti, il fuoco passa a Copy code quando l'adesivo è staccato e torna all'adesivo quando è rimesso, e una regione aria-live dice cosa succede. Un clic da script (l'anteprima della libreria) è una mano finta: una volta tira l'angolo e lo lascia, la volta dopo stacca l'adesivo, e staccato lo rimette.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
GIVE | script.js | 0.45 | Quanto va tirato l'angolo per staccare l'adesivo, come parte della sua diagonale. |
PEEK | script.js | 24 | Quanto si solleva l'angolo quando il mouse gli si avvicina, in pixel. |
BOUNCE | script.js | 0.45 | Come si posa l'adesivo quando torna giù: meno è più rimbalzante. |
FALL | script.js | 1500 | La gravità sull'adesivo staccato, in pixel al secondo per secondo. |
Quando usarla
Per i codici sconto e i premi da scoprire: lo sconto sul primo ordine, un regalo di benvenuto, il codice di un concorso, una ricompensa dopo un livello, un invito a un evento.
Sul telefono
L'adesivo è largo 300 pixel, o lo schermo meno 64, e alto 104; il dito lo tira senza far scorrere la pagina, senza selezionare e senza il menu del tocco lungo (touch-action none, user-select none, -webkit-touch-callout none e contextmenu annullato). Un tocco lo stacca in un colpo.
Con il movimento ridotto
L'angolo segue ancora la mano, perché è lei a muoverlo, ma all'arrivo non si alza, il mouse vicino non lo solleva e lasciato torna giù in 0,2 secondi senza rimbalzo. Staccato, l'adesivo svanisce sul posto invece di cadere, Stick it back lo rimette subito e le scritte cambiano senza muoversi.
Trappole
- Il disegno va 160 pixel oltre l'adesivo da ogni parte (il viewBox ha questo margine): il lembo girato esce dalla sua scatola e verrebbe tagliato.
- La parte attaccata si mostra con un clip-path, non si ridisegna: così la scritta e il bordo bianco vengono tagliati esattamente lungo la piega.
- Un tocco produce sia gli eventi del puntatore sia un click: il click che segue la mano si salta, e il click da solo (tasti, lettori di schermo) stacca l'adesivo.
- Copy code resta fuori dal giro del Tab (tabindex -1) finché l'adesivo lo copre: altrimenti il tasto porterebbe su un pulsante nascosto.
- L'adesivo che torna è opaco quasi subito (0,1 secondi): mezzo trasparente lascerebbe vedere il codice sotto. Prima si cancellano le trasformazioni rimaste dalla caduta (clearProps), o tornerebbe girato.
Librerie
GSAP 3.15.0, Sour Gummy (font variabile) 5.3.0, Google Sans Code (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 4 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.
