Il pulsante del mi piace

Pulsanti, SVG, TransizioniGSAPMediaPeso compresso: Demo 4,7 KBGSAP 28 KBGratisScarica lo zip

Un cuore e un numero: premuto, il cuore si schiaccia, un’onda rosa si apre intorno, il cuore torna pieno e rosso con un rimbalzo mentre otto raggi corti volano via, e il numero rotola avanti di uno; premuto di nuovo si svuota e il numero torna indietro.

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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The like button</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/plus-jakarta-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the button: a heart and a count. A press squashes the heart, a ring opens around it, the heart comes back
         full with a bounce while short rays fly out, and the count rolls to its next number; another press empties
         it and the count rolls back -->
    <button class="like" type="button" aria-pressed="false" data-like data-autoclic>
      <span class="like__icon" aria-hidden="true">
        <svg class="like__burst" viewBox="-60 -60 120 120" data-burst>
          <circle class="like__ring" r="0" data-ring/>
          <g data-rays></g>
        </svg>
        <svg class="like__heart" viewBox="0 0 32 32" data-heart>
          <path class="like__outline" data-outline d="M16 27.6c-.5 0-1-.2-1.4-.5C8.9 22.6 3.6 18.1 3.6 11.9c0-3.8 2.9-6.6 6.4-6.6 2.5 0 4.6 1.3 6 3.3 1.4-2 3.5-3.3 6-3.3 3.5 0 6.4 2.8 6.4 6.6 0 6.2-5.3 10.7-11 15.2-.4.3-.9.5-1.4.5z"/>
          <path class="like__fill" data-fill d="M16 27.6c-.5 0-1-.2-1.4-.5C8.9 22.6 3.6 18.1 3.6 11.9c0-3.8 2.9-6.6 6.4-6.6 2.5 0 4.6 1.3 6 3.3 1.4-2 3.5-3.3 6-3.3 3.5 0 6.4 2.8 6.4 6.6 0 6.2-5.3 10.7-11 15.2-.4.3-.9.5-1.4.5z"/>
        </svg>
      </span>
      <span class="like__count" aria-hidden="true" data-count></span>
    </button>
  </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.

13 valori da cambiare

Apri il Playground

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 del mi piace» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco una pillola bianca con un cuore vuoto e il numero 1,284. Sotto il mouse il cuore batte una volta. Premendo, la pillola affonda un poco e torna su una molla; il cuore si schiaccia per un attimo, poi un’onda rosa si apre da dietro di lui e si assottiglia fino a sparire, il cuore torna pieno e rosso con un rimbalzo elastico, e più in là otto raggi corti, rossi, corallo e ambra, volano via e si spengono. Intanto il numero diventa rosso e rotola a 1,285: la cifra vecchia esce in alto e la nuova entra da sotto, come in un contatore, e si muovono solo le cifre che cambiano. La pillola prende un fondo rosato. Premendo di nuovo il cuore si svuota con un piccolo sobbalzo e il numero rotola indietro. All’apertura la pillola sale e il cuore batte una volta.

Come funziona

Il cuore

Due tracciati SVG con la stessa forma: il contorno, che diventa rosso con una transizione CSS, e il cuore pieno, che va da scala 0 a 1 attorno a un punto poco sotto il centro. Premendo, tutto il cuore va a 0,76 in un decimo di secondo, poi torna a 1 col pieno che cresce da 0,15, tutti e due con elastic.out(POP).

L’onda e i raggi

Dietro al cuore c’è un secondo SVG più grande: un cerchio il cui raggio va da 11 a 26 mentre lo spessore del tratto va da 7 a zero, in poco più di metà di BURST, e otto linee, ognuna in un gruppo ruotato. Ogni raggio prima si allunga verso l’esterno partendo da 24 unità dal centro, poi si accorcia verso la sua punta lontana; uno su due è più corto. Compare mentre si allunga e sparisce mentre si accorcia, così le sue punte tonde non restano mai sole a fare un puntino.

Il numero

Ogni cifra sta in una casella che taglia quello che sporge. Quando cambia, la cifra nuova entra sotto quella vecchia e salgono insieme di un’altezza intera (più il margine della casella) con back.out, in ROLL secondi; togliendo il mi piace scendono. Se il numero cambia di lunghezza (da 999 a 1,000) rotola tutto insieme. Il numero è scritto con Intl.NumberFormat, con la virgola delle migliaia.

Pressione e tastiera

La pillola affonda al pointerdown e torna con una molla al pointerup. È un vero pulsante con aria-pressed, e il suo nome dice anche il numero («Like, 1,285 likes»), così la tastiera e gli screen reader hanno tutto.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`COUNT`	script.js	`1284`	Il numero prima del tuo mi piace.
`RAYS`	script.js	`8`	Quanti raggi volano via.
`BURST`	script.js	`0.6`	I secondi dell’onda e dei raggi.
`POP`	script.js	`[1, 0.4]`	La molla del cuore che si riempie: la sua forza e quanto in fretta si ferma.
`ROLL`	script.js	`0.5`	I secondi in cui rotola una cifra.
`COLORS`	script.js	`['#ff2f55', '#ff8a5c', '#ffc247']`	I colori dei raggi, a turno.

Provali nel Playground

Quando usarla

Per un mi piace, un salva, un preferito o un voto: ovunque un clic dice che una cosa ti piace e un numero conta quanti l’hanno detto.

Sul telefono

I tocchi fanno come i clic. Il battito del cuore sotto il mouse col dito non c’è; tutto il resto sì.

Con il movimento ridotto

Il cuore si riempie e si svuota senza schiacciarsi né rimbalzare, solo con una breve dissolvenza; niente onda, niente raggi, il numero cambia di colpo e la pillola non affonda.

Trappole

Una linea lunga zero con le punte tonde si disegna come un puntino: i raggi a riposo sono nascosti, e appaiono e scompaiono mentre cambiano lunghezza.
Lo spessore del cerchio è scritto nel CSS, che vince sull’attributo SVG: per farlo crescere va animato come stile (strokeWidth), non come attributo.
Il fromTo dei raggi ha immediateRender: false: senza, il loro stato di partenza comparirebbe subito al clic, prima che tocchi a loro.
Una cifra che sta ancora rotolando quando ne arriva un’altra finisce subito: nella casella resta solo la più nuova, così premendo in fretta le cifre non si accavallano.

Librerie

GSAP 3.15.0, Plus Jakarta Sans (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 4,7 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 12 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.