Скачать или смотреть Glassy Button with SVG Filters + GSAP Hover Animation (Webflow Tutorial)

In this tutorial we’ll build a crystal-like glassy button in Webflow using the magic of SVG filters and the power of GSAP.

You’ll learn how to:

✅ Set up the page structure and button styling
✅ Apply a custom SVG filter with backdrop-filter: url(#glass)
✅ Load a displacement map with JavaScript
✅ Understand how the SVG filter works and how to configure its parameters
✅ Animate the effect on hover with GSAP (soft glass ➝ icy crystal)
✅ Use multiple button instances on the same page or across different pages

📂 Helpful Resources:

Supasaito: https://www.supasaito.com?utm_source=...
Link to the cloneable: https://webflow.com/made-in-webflow/w...
SVG filters playlist:    • SVG Filter Effects in Webflow  
GSAP Easing documentation: https://gsap.com/docs/v3/Eases/

🔥 If you liked the video, feel free to leave a comment, hit the like button, and subscribe to my channel. 😁

---

My Webflow public profile:
https://webflow.com/@francescocastro

We can talk on LinkedIn:
  / francescocastronuovo  

Or we can get to know each other on X:
https://x.com/francescoflow

Or why not? Even on Instagram:
  / francescocastronuovo  

---

0:00 Intro
1:47 Analyzing the structure of the page
4:16 Creating the button
7:37 Adding the svg filter
8:53 Linking the svg filter to the button
13:10 Explaining how the svg filter works and how to customize it
19:00 Animating the button with GSAP
23:38 Bonus examples
24:18 Multiple button instances or different pages
26:00 Outro

#webflow #madeinwebflow #webflowtutorial #gsap