Il pulsante a strati
Pulsanti, Hover, Fisica
Gratis
Tutti i componenti
Il pulsante a bolla di sapone
Una pillola di sapone con i colori che nuotano nel film: respira, si china verso il puntatore, e al clic scoppia. Un buco si apre dal punto che hai toccato e corre sul film, dal bordo partono le goccioline, la scritta diventa «Invite sent» con una spunta e dopo un attimo la bolla si rigonfia con un rimbalzo.
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 soap bubble button</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/geist@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the soap bubble button: a pill of soap film with slow colours swimming in it. It breathes, leans towards the
pointer, and when it is pressed it pops: a hole opens from the point you touched and runs across the film,
droplets fly off the rim, the words become "Invite sent" and, a moment later, the bubble blows back up -->
<div class="soap" data-soap>
<button class="soap__btn" type="button" aria-label="Send invite" data-btn data-autoclic>
<span class="soap__film" aria-hidden="true" data-film>
<span class="soap__swirl" data-swirl></span>
<span class="soap__shine"></span>
</span>
<span class="soap__outline" aria-hidden="true" data-outline></span>
<span class="soap__label">
<span class="soap__word" aria-hidden="true" data-word>Send invite</span>
<span class="soap__word soap__word--done" aria-hidden="true" data-done>
<svg class="soap__tick" viewBox="0 0 20 20"><path data-tick d="M4.5 10.5l3.6 3.6 7.4-8.2"/></svg>
<span data-done-text>Invite sent</span>
</span>
</span>
</button>
<span class="soap__drops" aria-hidden="true" data-drops></span>
<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.
19 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 bolla di sapone» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco una pillola alta 60 pixel fatta di film di sapone: rosa, azzurro, verde chiaro e giallo nuotano piano al suo interno, un riflesso bianco sta sul bordo in alto e un filo viola corre tutto intorno. La pillola respira, senza ripetersi mai uguale. Sotto il mouse si china verso il puntatore su una molla morbida e i colori girano più in fretta; premendo si schiaccia. Al clic scoppia: dal punto esatto che hai toccato si apre un buco che corre sul film fino a farlo sparire, ventisei goccioline con un riflesso partono dal bordo (prima quelle più vicine al buco), la scritta sale e diventa «Invite sent» con una spunta che si disegna, e al posto del film resta solo un contorno chiaro. Dopo due secondi e mezzo la bolla si gonfia di nuovo da un puntino, con un rimbalzo, e la scritta torna. Con la tastiera scoppia dal centro.
Come funziona
Il film
Una pillola con overflow nascosto che contiene un grande gradiente conico (la funzione che lo scrive prende i colori da TINTS), sfocato di 12 pixel e fatto girare piano da GSAP. Sopra ci sono un velo bianco ovale che schiarisce il centro, perché la scritta si legga, e due riflessi; il bordo rosa sotto e azzurro sopra è un box-shadow inset su uno strato a parte, sopra i colori.
Il respiro e la molla
Due tween infiniti con durate diverse (scala in un verso, rotazione di mezzo grado nell'altro) così la forma non si ripete. Il pulsante intero segue il puntatore con tre quickTo (x, y, rotazione) su elastic.out; premendo, scala 1,035 in orizzontale e 0,9 in verticale, e al rilascio torna con un elastic.
Il buco
La maschera del film è un radial-gradient trasparente dentro e nero fuori, centrato sul punto del clic. Un tween su un oggetto qualsiasi ne fa crescere il raggio da 0 alla distanza dall'angolo più lontano, con power2.in, e a ogni fotogramma lo script riscrive la maschera. A buco finito il film va a opacità 0 e la maschera si toglie.
Le goccioline
Ognuna parte da un punto del bordo dell'ellisse della pillola e esce lungo la normale, che su una pillola larga punta soprattutto in su e in giù. Un tween la lancia e un secondo la fa cadere e svanire. Il ritardo è la distanza dal clic divisa per la larghezza, così le prime a partire sono quelle che il buco raggiunge per prime. Ognuna ha un gradiente radiale con un punto bianco e un anello dello stesso colore.
Gli stati
Riposo, scoppiata, gonfiaggio. Le due scritte stanno nella stessa cella di una griglia, così il pulsante ha sempre la stessa larghezza; una sale e esce, l'altra entra da sotto con back.out. La spunta è un tracciato SVG che si disegna con strokeDashoffset. Mentre è scoppiato il pulsante ha aria-disabled e una regione aria-live dice «Invite sent».
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
LABEL | script.js | 'Send invite' | La scritta a riposo. |
DONE | script.js | 'Invite sent' | La scritta dopo lo scoppio. |
DROPS | script.js | 26 | Quante goccioline partono. |
REACH | script.js | 70 | Quanto lontano volano le goccioline, in pixel. |
HOLD | script.js | 2.4 | I secondi in cui resta scoppiato prima di rigonfiarsi. |
BREATH | script.js | [0.02, 4.5] | Di quanto si gonfia e si sgonfia, e i secondi di un respiro. |
POP | script.js | 0.22 | I secondi che il buco impiega a correre sul film. |
TINTS | script.js | ['#ff7ac8', '#7ad0ff', '#b8ff8f', '#ffd978'] | I colori del film, a turno. |
Quando usarla
Per un'azione che si fa una volta e si vede compiersi: invitare, inviare, sbloccare, riscattare. Dove il tono è leggero e la conferma vuole un piccolo gesto di gioco.
Sul telefono
I tocchi fanno come i clic e il buco parte dal punto toccato. Col dito non ci sono l'inclinazione verso il puntatore e i colori più veloci; il resto sì.
Con il movimento ridotto
Niente respiro, colori fermi, niente inclinazione né schiacciamento. Il film svanisce con una breve dissolvenza, senza buco né goccioline; le scritte si danno il cambio con una dissolvenza e la bolla torna con una dissolvenza.
Trappole
- La maschera del buco ha il centro in pixel del film: se il film è ingrandito dal respiro lo scarto è di un pixel o due, ma la maschera non si può animare con una variabile CSS senza @property, quindi la riscrive lo script a ogni fotogramma.
- Una maschera sul film taglia anche la sua ombra esterna: va messa solo mentre scoppia e tolta subito dopo, non lasciata fissa.
- Le due scritte devono stare nella stessa cella di una griglia: se una esce dal flusso, il pulsante cambia larghezza fra i due stati e il bordo salta.
- Rigonfiando, la scala parte da 0,15 e non da 0: da 0 il rimbalzo dell'elastic non ha da dove prendere la rincorsa e la bolla compare di colpo.
- Il clic della tastiera ha posizione 0,0: va riconosciuto (detail 0) e fatto scoppiare dal centro, altrimenti il buco parte dall'angolo.
Librerie
GSAP 3.15.0, Geist (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 5,5 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 12 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.
