Meglio un link block o l'elemento button nativo per i pulsanti animati in Webflow?

Usa un link block. A differenza dell'elemento button nativo può annidare altri elementi — un'icona, un div overlay per gli effetti, un wrapper di testo — che è esattamente ciò che queste animazioni hover manipolano. Il button nativo è troppo restrittivo per qualcosa a più livelli.

Come faccio comparire del testo dentro un pulsante in hover?

Metti il testo in un div con overflow: hidden, poi anima la width di quel wrapper da 0 ad auto (la sua dimensione naturale). Il taglio dell'overflow tiene il testo nascosto finché il pulsante non si espande, e un easing elastico gli dà un rimbalzo giocoso.

Perché animare un overlay a -101% invece di -100% in Webflow?

A esattamente -100% un bordo o l'arrotondamento sub-pixel può lasciare una sottile striscia dell'overlay a vista. Spingerlo a -101% garantisce che stia completamente fuori dal pulsante prima di entrare, senza glitch visivi.

Quando conviene usare il CSS invece di GSAP per un effetto hover in Webflow?

Se l'effetto cambia solo le proprietà dell'elemento su cui passi il mouse — sfondo, colore del testo, box-shadow — bastano lo stato hover di Webflow più le transizioni CSS, e non spedisce JavaScript extra. Usa GSAP quando devi animare un figlio o un fratello, che lo stato hover non può toccare.

Micro-interazioni hover intelligenti in Webflow (GSAP + CSS)

20 dicembre 2025 Intermedio 34:40 webflowgsapcsshovermicro-interazioni

Progetta cinque micro-interazioni hover sui pulsanti in Webflow e impara quando usare GSAP, quando basta il CSS puro e come combinarli in modo pulito.

Punti chiave

Costruisci i pulsanti da un link block, non dall'elemento button nativo — ti lascia annidare un'icona, un div overlay e del testo da animare in modo indipendente.
Il trucco di reveal più pulito: metti l'elemento in movimento in un wrapper overflow:hidden e anima la width da 0 ad auto (o una transform), così resta mascherato finché non entra.
Spingi un overlay in entrata a -101% invece che -100%, così bordi e arrotondamenti sub-pixel non lasciano mai una sottile striscia visibile.
Non ogni hover ha bisogno di GSAP — un glow che cambia solo sfondo, colore e box-shadow del pulsante stesso è CSS puro tramite lo stato hover più le transizioni, più leggero e semplice.
Lo stato hover di Webflow stila solo l'elemento stesso, mai i suoi figli o fratelli — nel momento in cui devi animare un figlio (come ruotare un'icona), è il segnale per aggiungere un'interazione GSAP.

I bei pulsanti in hover non riguardano la complessità — riguardano la chiarezza, l’intenzione e la scelta dello strumento giusto al momento giusto. Questa lezione scompone cinque micro-interazioni hover, dal pulsante che si espande con rimbalzo a un effetto 3D di luce e ombra, e lungo la strada risponde alla domanda che conta davvero: quando serve GSAP, quando basta il CSS e come lavorano insieme?

C’è un pattern strutturale dietro tutte, e una mentalità dietro la scelta dello strumento. Afferra entrambi e costruirai effetti hover curati senza esagerare con l’ingegnerizzazione.

Come funziona

La struttura. Ogni pulsante qui è un link block, non l’elemento button nativo di Webflow — perché un link block può annidare figli (un’icona, un div overlay, un wrapper di testo), e questi effetti animano proprio quei figli. Alcune mosse riutilizzabili tornano di continuo: un wrapper overflow: hidden per mascherare un elemento in movimento; icone SVG con fill: currentColor così ereditano il colore del pulsante; e position: relative sul pulsante così un overlay in posizione assoluta può allinearsi a esso. Come sempre, le animazioni complesse si costruiscono spezzandole in action piccole e monoscopo.

I reveal. Il pulsante che si espande anima la width di un wrapper di testo da 0 ad auto dentro un genitore overflow-hidden, con easing elastico per il rimbalzo, guidato da toggle play/reverse su mouse-enter/leave. Il riempimento da sinistra fa scorrere un overlay a piena dimensione da translateX(-101%) a 0 mentre il colore del testo cambia per contrasto. Il riempimento dal basso fa lo stesso con un cerchio (aspect-ratio: 1, border-radius: 100%) che scorre da translateY(100%) a 0. Quel -101% invece di -100% è una protezione voluta: a esattamente -100% bordi o arrotondamenti sub-pixel possono lasciare una striscia visibile, quindi l’1% in più lo spinge del tutto fuori vista.

La scelta dello strumento — la vera lezione. Il quarto pulsante (glow) non usa nessuna interazione. Cambia solo il proprio sfondo, colore del testo e box-shadow in hover, quindi lo stato hover di Webflow più le transizioni CSS lo gestiscono per intero — niente GSAP, niente JavaScript generato. Il quinto pulsante (luce + ombra + freccia che ruota) è quello che svela tutto: la scala e la box-shadow del pulsante si fanno in CSS sullo stato hover, ma la freccia al suo interno no, perché lo stato hover di Webflow stila solo l’elemento stesso — non i suoi figli o fratelli. Ruotare quella freccia figlia richiede un’interazione GSAP. Quel confine è la regola pratica: CSS per le proprietà dell’elemento stesso, GSAP nel momento in cui devi raggiungere un figlio. Fai combaciare easing e durata su entrambi così l’effetto combinato sembra un solo movimento.

Il punto più ampio: usare GSAP di default non è gratis — ogni interazione aggiunge JavaScript che Webflow inietta nella pagina. Due o tre interazioni hover non affosseranno le tue performance, ma costruire con consapevolezza — CSS dove basta, GSAP dove serve — tiene il sito leggero e la tua intenzione chiara.

Come si usa

Pulsante che si espande con rimbalzo. Link block con un’icona e un wrapper di testo overflow: hidden. Una action che anima la width del wrapper 0 → auto, easing elastic-out; due eventi hover con control toggle play/reverse.
Riempimento da sinistra. Pulsante position: relative, overflow: hidden. Aggiungi un overlay a piena dimensione (position: absolute, offset pieni) a translateX(-101%). Action 1: X dell’overlay a 0%. Action 2: colore del testo verso un off-white per contrasto. Stessa durata, easing back-out.
Riempimento dal basso. Un div con aspect-ratio: 1, border-radius: 100%, translateY(100%), centrato dall’allineamento flex del pulsante. Una action che lo porta a translateY(0).
Glow (solo CSS). Aggiungi transizioni CSS su sfondo, colore e box-shadow, poi imposta i valori target sullo stato hover del pulsante nel pannello stile. Nessuna interazione necessaria.
Luce + ombra (ibrido). Transizioni CSS su transform e box-shadow; sullo stato hover, scala e aggiungi box-shadow per la luce proiettata e l’ombra. Poi un’interazione GSAP con una action che ruota la freccia figlia (es. -45°), facendo combaciare easing/durata del CSS così tutto si legge come un solo effetto.

Nella knowledge base

Pagine di riferimento derivate da questa lezione — lo stesso materiale riorganizzato per concetto, così cerchi una cosa sola senza riguardare il video. In inglese.

The interactions model — trigger, target, action, timeline
A Webflow GSAP interaction is a trigger that fires one or more actions, each applied to a set of targets and laid out on a horizontal timeline; the action's type (to / from / from to) absorbs the initial state, so there is no separate initial-state step the way Classic Interactions had.
Build animated hover buttons — and know when not to use GSAP
Five button effects share three reusable moves: an overflow-hidden wrapper masking a moving child, animating width from 0 to auto, and pushing an incoming overlay to -101%; the real lesson is the tool boundary — CSS for the element's own properties, GSAP the moment you must reach into a child.
A thin line or sliver appears at the edge of a moving element
Fractional device pixels mean an element parked at exactly -100% can leave a hairline of itself visible, and two perfectly aligned elements moving together can show an anti-aliasing seam between them; overshoot to -101% in the first case and pull a -1px margin in the second.
Webflow's native Button is wrong for animated controls
Webflow's native Button element renders as an anchor and cannot nest children, which makes it wrong twice over — semantically wrong for anything that performs an action rather than navigating, and structurally useless for the layered hover effects that need an icon or overlay inside.

Domande frequenti

Meglio un link block o l'elemento button nativo per i pulsanti animati in Webflow?: Usa un link block. A differenza dell'elemento button nativo può annidare altri elementi — un'icona, un div overlay per gli effetti, un wrapper di testo — che è esattamente ciò che queste animazioni hover manipolano. Il button nativo è troppo restrittivo per qualcosa a più livelli.
Come faccio comparire del testo dentro un pulsante in hover?: Metti il testo in un div con overflow: hidden, poi anima la width di quel wrapper da 0 ad auto (la sua dimensione naturale). Il taglio dell'overflow tiene il testo nascosto finché il pulsante non si espande, e un easing elastico gli dà un rimbalzo giocoso.
Perché animare un overlay a -101% invece di -100% in Webflow?: A esattamente -100% un bordo o l'arrotondamento sub-pixel può lasciare una sottile striscia dell'overlay a vista. Spingerlo a -101% garantisce che stia completamente fuori dal pulsante prima di entrare, senza glitch visivi.
Quando conviene usare il CSS invece di GSAP per un effetto hover in Webflow?: Se l'effetto cambia solo le proprietà dell'elemento su cui passi il mouse — sfondo, colore del testo, box-shadow — bastano lo stato hover di Webflow più le transizioni CSS, e non spedisce JavaScript extra. Usa GSAP quando devi animare un figlio o un fratello, che lo stato hover non può toccare.