Il pulsante che copia
Pulsanti, Testo, SVG, Fisica
NuovaGratis
Tutti i componenti
Il pulsante che chiede conferma
Il pulsante Delete project di un’app, nello stile minimal, che al primo clic non cancella niente: la scritta diventa Click again to delete e la pillola si allunga su una molla. Il tempo per rispondere è lo spazio che resta: in tre secondi la pillola si stringe sulla domanda, le lettere si condensano sull’asse della larghezza per starci sempre giuste e una linea vermiglia sottile sotto di loro si consuma dai due capi. Se nessuno risponde torna Delete project; col secondo clic la pillola si ripiega nella sua linea, che diventa il filetto sotto Project deleted, con Undo accanto.
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 asks twice</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 frame keeps the room of the widest state, so the preview never has to move -->
<div class="frame" data-frame>
<!-- the pill: drawn by the script on every frame. After the first click it asks again, and the time to answer
is the room it has: the pill closes in on the question, the letters condense on the width axis to stay
inside, and a thin line under them burns down to nothing. Confirmed, the pill folds down into that line -->
<span class="pill" aria-hidden="true" data-pill>
<span class="label" data-rest>Delete project</span>
<span class="label" data-ask>Click again to delete</span>
<span class="fuse" data-fuse></span>
</span>
<button class="del" type="button" aria-label="Delete project" data-del data-autoclic></button>
<!-- once it is done: a quiet note sitting on the line the pill became, and the way back -->
<div class="done" data-done>
<span class="done__clip" aria-hidden="true"><span class="done__text" data-done-text>Project deleted</span></span>
<button class="undo" type="button" aria-label="Undo, restore the project" data-undo>
<span class="undo__clip" aria-hidden="true">
<svg class="undo__arrow" viewBox="0 0 16 16" data-arrow><path d="M5.6 3.8 2.6 6.8l3 3M2.6 6.8h7.1a3.4 3.4 0 0 1 0 6.8H7.2" pathLength="1" data-arrow-path/></svg>
<span class="undo__word" data-undo-word>Undo</span>
</span>
</button>
</div>
</div>
<p class="sr" role="status" aria-live="polite" data-said></p>
</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.
27 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 chiede conferma» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco c’è solo una pillola color inchiostro alta 60 pixel con scritto Delete project in Archivo, chiaro su scuro. All’apertura la pillola nasce tonda e si allunga su una molla mentre le lettere salgono una dopo l’altra. Sotto il puntatore la scritta si allarga sull’asse wdth e la pillola si gonfia di qualche pixel. Al primo clic Delete project esce verso l’alto e da sotto sale, lettera per lettera, Click again to delete, con l’ultima parola in vermiglio; la pillola si allunga per tenerla, va oltre di un pixel e torna. Sotto la domanda si accende dal centro una linea vermiglia sottile. Da quel momento il tempo si vede in due modi: la linea si consuma dai due capi fino a sparire, e la pillola si stringe piano sulla domanda, sempre più svelta verso la fine; le lettere si condensano sull’asse della larghezza (da 100 a 64) e prendono un po’ di peso, così la frase sta sempre giusta dentro la pillola, sempre più fitta e tesa. Se in tre secondi non arriva il secondo clic la domanda cade in basso, Delete project rientra dall’alto e la pillola tira un piccolo respiro sulla sua molla. Se arriva, la domanda cade dentro la riga, il bordo di sopra della pillola scende fino alla linea e la pillola diventa un filetto sottile; dal filetto salgono Project deleted, in grigio, e Undo con la sua freccia che si disegna. Undo rifà tutto al contrario: le parole affondano nella riga, il filetto si riapre in pillola e torna Delete project.
Come funziona
Le scritte misurate una volta
Archivo è un carattere variabile con l’asse della larghezza, da 62 a 125. All’avvio, quando il carattere è arrivato (document.fonts.load per i due pesi), lo script misura Delete project e Click again to delete sull’elemento vero con getBoundingClientRect, a sei larghezze dell’asse e due pesi. La larghezza a un asse e a un peso qualsiasi si ricava interpolando fra i quattro valori vicini: mentre la pillola si muove non si misura più niente, si fanno solo conti.
Il tempo è lo spazio
Il primo clic fa partire un tween di GSAP che porta un numero, il tempo, da 0 a 1 in WINDOW secondi, senza curva. Il tempo passa per una curva che parte piano e accelera, e da lì vengono la larghezza dell’asse della domanda (da SQUEEZE[0] a SQUEEZE[1]) e il suo peso (da WEIGHT[0] a WEIGHT[1]); la pillola è larga quanto la domanda a quell’asse più il margine, così si stringe sulla frase e la frase si condensa per starci. La linea è lunga quanto la domanda in quell’istante per il tempo che resta, centrata: si consuma dai due capi.
Tre molle per la pillola
La pillola non ha una forma fissa: sono tre numeri, la lunghezza, il bordo di sopra e il bordo di sotto, ognuno su una molla smorzata integrata a mezzo passo, col passo di tempo limitato a 1/30 di secondo. La lunghezza segue SPRING, smorzata poco sotto 1, e va oltre di un pixel quando si allunga; i bordi seguono FOLD. Quando le molle arrivano entro tre centesimi di pixel si posano esattamente sul punto giusto, così la pillola a riposo è sempre la stessa immagine e la funzione sul ticker di GSAP si toglie da sola.
Il ripiegamento nella linea
La linea che conta sta 14 pixel sotto il centro, e lì si ripiega la pillola: col secondo clic i suoi bordi vanno a 14 meno e più 0,75 pixel e la lunghezza diventa quella della riga Project deleted · Undo, misurata con lo spazio per l’hover. Le scritte dentro la pillola restano sempre al centro della cornice, qualunque sia il bordo di sopra (lo script sposta il loro top al contrario), quindi il bordo che scende le copre come una tendina. Project deleted e Undo stanno in due ritagli che finiscono proprio sopra il filetto, e salgono da lì.
Il doppio clic e la tastiera
Un secondo clic più vicino di GUARD secondi al primo è un doppio clic, e non conferma niente: senza questo controllo chi fa doppio clic per abitudine cancellerebbe il progetto. Invio due volte fa lo stesso del mouse, Esc annulla la domanda. Dopo la conferma il fuoco passa a Undo, e dopo Undo torna al pulsante. Un testo nascosto con role=status dice la domanda e il tempo, Deletion cancelled, Project deleted e Project restored.
Il giro dell’anteprima
Un clic fatto da uno script ha detail uguale a 0, ma anche Invio e la barra spaziatrice: per distinguerli lo script si segna il tasto premuto prima del clic. Il clic da script senza tasto fa partire una timeline di GSAP con tutto il giro: la domanda lasciata scadere, la domanda confermata, Project deleted, Undo e di nuovo Delete project. I clic da script che arrivano durante il giro non fanno niente; un clic vero lo ferma e il pulsante risponde da lì.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | 'Delete project' | La scritta a riposo. |
ASK | script.js | 'Click again to delete' | La domanda dopo il primo clic; la sua ultima parola prende l’accento. |
DONE | script.js | 'Project deleted' | La nota a cosa fatta, sopra il filetto. |
UNDO | script.js | 'Undo' | La parola per tornare indietro. |
WINDOW | script.js | 3 | I secondi che ci sono per confermare: la linea si consuma e la pillola si stringe in questo tempo. |
GUARD | script.js | 0.35 | Un secondo clic più vicino di così al primo è un doppio clic e non conferma. |
SQUEEZE | script.js | [100, 64] | L’asse della larghezza della domanda quando viene fatta e quando il tempo è finito (Archivo va da 62 a 125). Più distanti sono, più la pillola si stringe. |
WEIGHT | script.js | [560, 690] | Il peso delle scritte, e il peso a cui arriva la domanda mentre si stringe. |
SPRING | script.js | [430, 0.78] | La molla della lunghezza della pillola: rigidezza e smorzamento (sotto 1 va un pixel oltre e torna). |
FOLD | script.js | [300, 0.8] | La molla dei bordi, che ripiega la pillola nella linea e la riapre. |
STAGGER | script.js | 0.016 | I secondi fra una lettera e la successiva quando una scritta entra. |
SWELL | script.js | 6 | I pixel di cui si gonfia la pillola sotto il puntatore. |
Quando usarla
Per ogni azione che non si può fare per sbaglio ma non merita una finestra di conferma: cancellare un progetto, togliere un membro dal gruppo, svuotare il cestino, revocare una chiave. Il secondo clic sta nello stesso punto del primo, quindi la conferma costa un gesto solo in più; Undo resta per chi si è pentito lo stesso.
Sul telefono
La pillola è la stessa, alta 60, e la domanda distesa sta comoda nei 390 pixel. Senza puntatore non c’è il gonfiarsi dell’hover: il tocco schiaccia la pillola e la rilascia sulla molla; due tocchi confermano, con le stesse animazioni del computer, e Undo ha un’area di tocco più grande della parola.
Con il movimento ridotto
Niente lettere che salgono o cadono, niente molle e niente pillola che si stringe: le scritte sfumano l’una nell’altra, la pillola prende subito la misura giusta e la domanda resta distesa. Il tempo si vede lo stesso nella linea vermiglia che si consuma, perché è un’informazione e non un ornamento. Confermato, la pillola è subito filetto e la nota compare sfumando.
Trappole
- Il clic dell’anteprima e Invio da tastiera hanno tutti e due detail uguale a 0: col solo detail chi usava la tastiera faceva partire il giro dimostrativo invece di confermare. Lo script si segna il tasto premuto nel keydown e lo consuma nel clic.
- Con le parole vecchie e nuove che si muovevano insieme, per un istante Delete project e Click again stavano una sopra l’altra dentro la pillola. Le lettere che escono vanno via in due decimi di secondo con uno sfalsamento minimo, e quelle nuove partono dopo.
- Confermando, la domanda in dissolvenza si vedeva ancora mentre il bordo della pillola le scendeva sopra, e il filetto sembrava sporco: in conferma la domanda esce in 15 centesimi di secondo e la pillola si ripiega appena dopo.
- Undo stava sotto il filetto invece che accanto a Project deleted: il white-space: pre della riga teneva l’a capo del codice HTML dentro il pulsante. Il pre sta solo sulle scritte.
- Undo che si allarga sotto il puntatore usciva dalla fine del filetto: la riga è misurata a riposo con otto pixel in più e Undo sta attaccato alla sua fine destra (justify-content: space-between), così si allarga verso sinistra.
- Il fuoco spostato su Undo appena il pulsante spariva disegnava l’anello intorno al vuoto, prima che la parola arrivasse: il fuoco passa a Undo solo quando la nota è salita, e intanto l’anello del pulsante che si ripiega è trasparente.
- index.css di Fontsource carica solo l’asse del peso: senza wdth.css la domanda non si condensa e la pillola, che si stringe lo stesso, la taglierebbe.
Librerie
GSAP 3.15.0, Archivo (font variabile, con gli assi del peso e della larghezza) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,0 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.
