Come faccio un bottone di vetro che distorce lo sfondo in Webflow?

La distorsione vera arriva da un filtro SVG, non da una sfocatura CSS. Incorpori un filtro che usa feDisplacementMap e lo richiami dal bottone con backdrop-filter: url(#glass): a quel punto il filtro piega ciò che sta dietro, così il contenuto in scorrimento si increspa attraverso il bottone come vero vetro.

Cos'è una mappa di spostamento e perché l'effetto ne ha bisogno?

Una mappa di spostamento è una texture in scala di grigi o a colori che il filtro legge come una mappa topografica: le zone più chiare e più scure gli dicono quanto spingere o tirare ogni pixel. Senza, il filtro non sa come piegare la luce e il vetro resta piatto — è la mappa a dargli profondità e movimento.

Perché il mio filtro SVG non funziona quando lo aggiungo in Webflow?

Di solito sono due cose. Metti l''embed del filtro proprio in cima al body così è disponibile a livello globale: più in basso alcuni browser lo limitano allo scope locale e lo ignorano. E assicurati che il bottone abbia l''attributo fc-glass-button, perché lo script punta a quell''attributo, non a una classe.

Mi serve GSAP per l'animazione all'hover del bottone?

Sì: la transizione da vetro morbido a ghiaccio nitido è una timeline GSAP che anima la sfocatura e lo spostamento del filtro. Ricordati di attivare GSAP nelle impostazioni del progetto Webflow — il codice gira, ma finché la libreria non è caricata non si muove niente.

Posso usare lo stesso bottone di vetro su più pagine in Webflow?

Puoi. Lo script gestisce già più bottoni sulla stessa pagina, quindi ti basta duplicare il bottone. Per riusarlo su altre pagine, trasforma il filtro e lo script in componenti (così le modifiche si propagano ovunque), oppure metti il solo script nel footer code del sito e piazza un bottone dove vuoi.

Bottone di Vetro con Filtri SVG e GSAP in Webflow

Crea in Webflow un bottone di cristallo che rifrange la pagina dietro di sé con un filtro SVG e, all'hover, passa da vetro morbido a ghiaccio nitido con GSAP.

Crea in Webflow un bottone di cristallo che rifrange davvero la pagina dietro di sé e poi prende vita all’hover, passando da vetro smerigliato a ghiaccio nitido con un pizzico di GSAP. Il trucco non è una sfocatura CSS: è un vero filtro SVG collegato al bottone tramite backdrop-filter, così tutto ciò che scorre sotto si piega e si increspa attraverso il vetro.

Quello che lo rende speciale è quanto sembra fisico. Dato che il filtro legge il contenuto reale dietro il bottone, l’effetto cambia mentre scorri, e l’animazione all’hover gli regala una piccola spinta tattile. Sembrano tanti pezzi in movimento, ma sotto ci sono tre primitive di un filtro SVG, poche righe di JavaScript per dargli una texture e una minuscola timeline GSAP.

E niente è legato ai miei nomi di classe. Lo script si aggancia a un attributo, quindi puoi chiamare le cose come preferisci e avere lo stesso effetto senza pensarci.

Come funziona

L’aspetto vetro nasce da un filtro SVG, non da una sfocatura CSS. Incolli il markup del filtro (dal cloneable) dentro un elemento Embed, gli dai display: none e lo sposti proprio in cima al <body>. La posizione conta: metti il filtro in alto così è globale e sempre disponibile — più in basso alcuni browser lo limitano allo scope locale o lo saltano, un po’ come una variabile CSS che va messa in :root. Il filtro ha id="glass" e il bottone lo richiama con una proprietà personalizzata, backdrop-filter: url(#glass). È quella riga a creare il collegamento: il bottone prende la sorgente del filtro dall’elemento con quell’ID.

Dentro il filtro lavorano tre primitive. feImage carica la mappa di spostamento — una texture che funziona come una mappa topografica, dove le zone più chiare e più scure dicono al filtro quanto spingere o tirare ogni pixel — e produce un risultato che il resto della catena può leggere. feGaussianBlur ammorbidisce prima il bottone; il suo stdDeviation regola quanto il vetro appare nitido o nebbioso (0.01–0.02 è una foschia leggera, 1–2 è decisamente sfocato). Poi la star, feDisplacementMap, prende insieme il bottone sfocato e la mappa e sposta i pixel: il suo scale è la manopola dell’intensità — 0 niente distorsione, 1–5 increspature delicate di vetro, 20+ caos da specchio deformante. La regione del filtro è volutamente sovradimensionata (x="-1" y="-1" width="3" height="3") così ai bordi non si taglia nulla.

C’è una cosa che il solo markup non può fare: la mappa di spostamento è un’immagine esterna, quindi un breve snippet JavaScript la recupera e la passa a feImage. Senza, il filtro sa di dover distorcere ma non ha nessuna texture con cui farlo. Questo script vive in un secondo Embed in fondo al body — non strettamente necessario, dato che parte dopo che il DOM è pronto, ma è il posto più pulito e prevedibile. Fondamentale: lo script punta al bottone tramite l’attributo fc-glass-button, non tramite una classe, quindi la tua convenzione di naming è del tutto irrilevante.

L’hover arriva per ultimo, ed è GSAP. Una piccola timeline anima lo spostamento e la sfocatura dallo stato di riposo “vetro morbido” allo stato “ghiaccio nitido”, sollevando leggermente il bottone e ingrandendolo un filo per un feedback tattile. Lo regoli con qualche costante in cima al codice: hoverScale (l’intensità della distorsione — circa 1.05–1.25 per un’increspatura elegante, 1.40+ per bordi di cristallo spezzato), hoverTransScale (la trasformazione di scala del bottone — tienila contenuta), hoverBlur (0 per nitido, ~0.03 per un atterraggio più morbido), duration (0.2s scattante, 0.4s elegante) ed ease (per esempio power1.out, power2.out, expo.out). La stessa animazione parte anche sul focus da tastiera e si inverte al blur, così chi naviga da tastiera vive la stessa esperienza — l’effetto resta accessibile, non solo per il mouse.

Come usarlo

Clona il progetto. Prendi il cloneable Webflow: include il bottone, il markup del filtro SVG, lo script che carica la mappa di spostamento e lo snippet GSAP per l’hover, tutto commentato.
Dai al bottone qualcosa da rifrangere. L’effetto brilla solo quando c’è contenuto dietro. Nella demo il bottone è fixed e centrato mentre un’immagine di sfondo a tutta larghezza scorre sotto, così vedi il filtro cambiare con la pagina. Va bene qualsiasi sfondo ricco e scorrevole.
Stila la base di vetro. Rendi lo sfondo del bottone trasparente con un gradiente lineare bianco e delicato (circa 135deg, bianco al ~20% → ~8% → ~3% di opacità), un border-radius a pillola e un bordo bianco di 1px a ~30% di opacità. È questa base smerigliata che il filtro rifrange — modificala o toglila pure: cambia l’aspetto, non il filtro.
Aggiungi il filtro. Incolla il markup del filtro in un Embed, mettilo a display: none e sposta quell’Embed in cima al body. Ha id="glass".
Collega il filtro al bottone. Sul bottone aggiungi la proprietà personalizzata backdrop-filter con valore url(#glass). Vedrai comparire subito un primo effetto vetro.
Carica la mappa di spostamento. Incolla lo script nel secondo Embed (display: none), posizionato in fondo al body. Passa l’immagine-mappa al filtro così ha una texture da piegare.
Marca il bottone. Aggiungi l’attributo fc-glass-button al bottone così lo script lo trova a prescindere dal nome della classe.
Aggiungi l’hover e attiva GSAP. Incolla lo snippet GSAP, poi attiva GSAP nelle impostazioni del progetto — il codice non fa nulla finché la libreria non è caricata. Ritocca hoverScale, hoverBlur, duration ed ease a piacere.
Riusalo. Per più bottoni sulla stessa pagina, duplica il bottone: lo script gestisce già più istanze. Per altre pagine, trasforma il filtro e lo script in componenti (le modifiche si propagano ovunque), oppure metti il solo script nel footer code del sito e piazza un bottone dove serve.

Bottone di Vetro con Filtri SVG e GSAP in Webflow

Punti chiave

Capitoli del video

Come funziona

Come usarlo

Risorse

Domande frequenti

Fa parte anche di questi corsi