Il nastro nel bottone

Hover, SVG, TestoSolo CSS, GSAPFacilePeso compresso: Demo 5,6 KBGSAP 28 KBGratisScarica lo zip

Bottoni a forma di macchia: col puntatore sopra la scritta diventa un nastro di copie di sé stessa che scorre inclinato, tagliato dalla forma della macchia, e intanto il bordo ondeggia.

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="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Il nastro nel bottone</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="pagina">
    <p class="nota" data-nota>Passa col mouse sui bottoni: la scritta diventa un nastro che scorre, un po’ storto e tagliato dalla forma della macchia, e la macchia si muove.</p>

    <h1 class="titolo">Ordina una cassa, o vieni a berla da noi.</h1>

    <!-- ogni bottone è una macchia: lo script ne disegna la forma e ci mette dentro il nastro -->
    <div class="bottoni">
      <button class="bottone" type="button" data-bottone="cassa" style="--macchia: #FF6B2C">
        <span class="bottone__scritta">Ordina una cassa<svg class="freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
      </button>
      <button class="bottone" type="button" data-bottone="bar" style="--macchia: #FFE45C">
        <span class="bottone__scritta">Trova un bar<svg class="freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
      </button>
      <button class="bottone" type="button" data-bottone="scrivici" style="--macchia: #8ED3EE">
        <span class="bottone__scritta">Scrivici<svg class="freccia" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></span>
      </button>
    </div>

    <p class="sotto">Consegne in città il martedì e il venerdì; gli altri giorni ci trovi al banco, dalle cinque in poi.</p>
  </main>

  <!-- i ritagli con la forma delle macchie: il nastro si vede solo dentro -->
  <svg class="ritagli" width="0" height="0" aria-hidden="true"><defs data-ritagli></defs></svg>

  <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.

17 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 nastro nel bottone» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Tre bottoni a forma di macchia, arancio, giallo e celeste, con un contorno sottile. Col puntatore sopra la scritta sparisce in un attimo e al suo posto scorre verso sinistra un nastro di copie della stessa scritta con la sua freccia, inclinato di tre gradi e tagliato esattamente dalla forma della macchia; la copia di partenza sta proprio dove stava la scritta, così il cambio non si vede. Intanto il bordo della macchia ondeggia piano, più di quando è a riposo, e torna calmo quando il puntatore se ne va. Col dito il nastro corre finché tieni premuto; con la tastiera, finché il bottone ha il fuoco.

Come funziona

La macchia

La forma è un superellisse con esponente 2,6, fatto sulla misura vera del bottone: 48 punti spinti in fuori o in dentro lungo la normale, di pochi pixel, da quattro onde lente con frequenze 2, 3, 5 e 7 e fasi a caso, con un seme fisso per ogni bottone. I punti diventano una curva chiusa e morbida e si riportano fra 0 e 1.

Lo stesso path tre volte

Quel path va nella macchia sotto e nel contorno sopra, due SVG con viewBox 0 0 1 1 stirati sul bottone, col contorno in vector-effect non-scaling-stroke perché resti sottile, e in un clipPath con clipPathUnits objectBoundingBox: il ritaglio del nastro segue la forma qualunque sia la misura del bottone.

Il nastro

Cinque copie della scritta in fila, dentro un contenitore ruotato di −3 gradi. Un’animazione CSS le sposta di una copia intera, all’infinito, in (larghezza di una copia / 70) secondi, quindi sempre a 70 pixel al secondo. Parte da metà bottone meno una copia e mezza, così la seconda copia è centrata dove stava la scritta, e a ogni accensione riparte da capo.

Acceso e spento

Un solo ascolto di pointermove sulla finestra guarda con closest() sopra quale bottone sta il puntatore. Acceso, la scritta va a opacità 0 in 0,12 secondi, il nastro compare in 0,35 e il ticker di GSAP fa ondeggiare il bordo 1,7 volte di più finché il puntatore resta sopra; spento, il bordo si calma e il ticker si ferma da solo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`ONDEGGIA`	script.js	`1.8`	Quanto è irregolare il bordo a riposo, in pixel.
`DI_PIU`	script.js	`1.7`	Quante volte ondeggia di più col puntatore sopra.
`CORRE`	script.js	`70`	La velocità del nastro, in pixel al secondo.
`STORTO`	script.js	`−3`	L’inclinazione del nastro, in gradi.
`TONDEZZA`	script.js	`2.6`	La forma di base: 2 è un ovale, più sale più diventa un rettangolo tondo.

Provali nel Playground

Quando usarla

Per i bottoni di un sito che ha voglia di giocare: una bibita, un locale, un festival, un negozio di cose colorate. Va bene su qualunque bottone con una scritta corta.

Sul telefono

I bottoni vanno in colonna; il nastro corre finché il dito resta premuto e ancora un momento dopo, poi torna la scritta.

Con il movimento ridotto

Niente nastro e niente bordo che ondeggia: col puntatore sopra la macchia si scalda appena di colore e la scritta resta ferma.

Trappole

Un ritaglio fatto sul riquadro del bottone lascia uscire il nastro dalle punte della macchia: il clipPath deve avere la stessa forma, in objectBoundingBox.
Col dito il browser manda un pointerout appena il dito si alza: se lo si prende per il puntatore che esce dalla finestra, il nastro si spegne subito. Si ascolta solo quello del mouse.
Un’animazione in pausa riparte da dove si era fermata, e allora la copia non sta più sotto la scritta: a ogni accensione la si fa ripartire da capo.
Su iPhone, tenendo premuto un link parte la sua anteprima e il nastro si ferma: per un’azione della pagina si usa un vero button, e in più -webkit-touch-callout: none.

Librerie

GSAP 3.15.0, Mona Sans (font variabile) 5.3.0.

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

Collaudo

Provata il 28 settembre 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.