How to Create an Animated Glassy Button with SVG & GSAP in Webflow

This masterclass guides Webflow developers through the advanced construction of a "crystal glass" button that dynamically refracts background content to mimic physical optical properties. By moving beyond standard CSS styling, the tutorial demonstrates how to leverage SVG filters—specifically using displacement maps—to create a sophisticated translucent interface element that reacts organically to the scrolling content beneath it.

The technical implementation focuses on embedding global SVG definitions and linking them to UI components via the backdrop-filter property, a technique that allows for complex pixel distortion and blurring. The lesson details the critical role of JavaScript in loading external displacement textures to feed the SVG primitives, ensuring the refractive effect is rendered consistently across different browsers.

Finally, the tutorial elevates the component from a static visual to a tactile interactive element using GSAP (GreenSock Animation Platform). Viewers will learn to build accessible animation timelines that transition the button from a "soft glass" resting state to a "sharp ice" active state upon hover, while also mastering the architecture needed to scale this effect across multiple button instances and pages.

• Advanced SVG Filter Integration: Learn to embed custom SVG code containing primitives like feGaussian Blur and feDisplacementMap to achieve refractive visuals that standard CSS cannot replicate.
• Displacement Map Mechanics: Understand how to utilize an external texture image (displacement map) to dictate how background pixels are "pushed" or "pulled," creating the illusion of depth and physical material.
• GSAP Micro-Interactions: Master the use of GreenSock to animate filter parameters dynamically, enabling high-fidelity transitions that sharpen the button's edges and adjust its scale during user interaction.
• Granular Customization: Gain the ability to fine-tune the "physics" of the material by adjusting specific variables such as hoverScale (distortion intensity) and hoverBlur (softness), allowing for a range of styles from subtle frost to jagged crystal.
• Scalability & Accessibility: Discover the best practices for structuring code with global embeds and attribute-based targeting to ensure the component is keyboard-accessible and easily reusable across an entire project.

• 04:31 – Assigning the class dashbutton to the button element.
• 05:34 – Configuring a specific linear gradient background with varying white opacity stops (20%, 8%, and 3%).
• 07:40 – Adding an Embed element to the page to house the raw SVG filter code.
• 08:15 – Assigning the class dashbutton SVG-filter to the Embed element and setting its display property to none.
• 09:20 – Adding the backdrop-filter custom property to the button's style settings.
• 09:36 – Setting the backdrop-filter value to url('#glass') to link the button to the SVG filter ID.
• 10:54 – Adding a second Embed element to load the JavaScript necessary for the displacement map.
• 12:22 – Adding the custom attribute fc-glass-button to the button element so the script can target it regardless of class names.
• 19:02 – Pasting the GSAP animation code into the embed element to handle hover interactions.
• 20:15 – Configuring specific JavaScript constants like hoverScale and hoverBlur to customize the intensity of the distortion.
• 23:14 – Enabling the GSAP library in the project settings to ensure the animation script functions correctly.

Building an Interactive Crystal Glass Button

Prerequisites: You will need the SVG filter code and JavaScript snippets referenced in the video (available in the associated cloneable project).

1. Set Up the Page Structure

Reference: [01:48] – [03:41]

• How: Create a section with a full-width background image. Inside, place a container set to Flex (centered) and position: fixed (full).
• Why: The refractive "glass" effect relies entirely on what is behind the button. Using a background image and allowing content to scroll underneath provides the necessary contrast and movement to make the distortion visible and effective.

2. Style the Button Base

Reference: [04:17] – [06:45]

• How:

1. Add a button and assign the class dashbutton.
2. Set Padding to 4em (top/bottom) and 7em (left/right).
3. Set Typography to "Exo", Weight 500, Size 3em, All Caps.
4. Set Background to a linear gradient (135°) with three white stops: 20% opacity, 8% opacity, and 3% opacity.
5. Add a Border Radius of 100vw (or 100rem) for a pill shape.
6. Add a 1px solid white Border at 30% opacity.

• Why: The linear gradient is critical; without this specific semi-transparent "frosting," the button would be invisible. The gradient creates the physical illusion of a glass material before the filter is even applied.

3. Embed the SVG Filter

Reference: [07:37] – [08:50]

• How:

1. Add an Embed element to the page.
2. Paste the raw SVG filter code (containing <feDisplacementMap>).
3. Give the embed the class dashbutton SVG-filter.
4. Set the display to None so it doesn't disrupt the layout.
5. Move the embed element to the very top of the <body>.

• Why: Placing the SVG definition at the top of the document ensures it is global and accessible to all browsers immediately, similar to defining a root CSS variable.

4. Link the Filter to the Button

Reference: [08:54] – [09:50]

• How:

1. Select the dashbutton.
2. Scroll to the Custom Properties section in the Style panel.
3. Add the property backdrop-filter.
4. Set the value to url('#glass').

• Why: This CSS property connects the visual button element to the SVG code by referencing the ID (#glass) defined inside the Embed. This activates the refractive effect.

5. Load the Displacement Map via JavaScript

Reference: [10:15] – [11:50]

• How:

1. Add a second Embed element.
2. Paste the JavaScript code responsible for loading the displacement map image.
3. Give this embed the class dashbutton script and set display to None.
4. Place this element at the very bottom of the <body>.

• Why: The SVG filter needs a texture (a displacement map) to know how to distort the pixels. This script loads that external image and feeds it into the filter. Placing it at the bottom is a best practice for page performance.

6. Add the Target Attribute

Reference: [12:00] – [12:36]

• How:

1. Select the dashbutton element.
2. Go to the Element Settings panel.
3. Add a custom attribute: Name: fc-glass-button (Value can be empty).

• Why: The JavaScript is written to target this specific attribute rather than a class name. This allows you to rename your CSS classes freely without breaking the functionality of the code.

7. Configure GSAP Animations

Reference: [19:00] – [21:20]

• How:

1. Open the Script Embed created in Step 5.
2. Paste the GSAP animation code snippet inside.
3. (Optional) Adjust the configuration constants at the top of the code:‍
   
   • hoverScale: Controls distortion intensity (try 1.15 for soft, 1.60 for jagged).‍
   • hoverBlur: Controls softness (try 0.02 for soft, 0 for sharp).

• Why: This code dictates the "physics" of the button. It instructs the browser to transition the button from a soft, blurred state to a sharp, high-distortion "ice" state when the user hovers.

8. Enable the GSAP Library

Reference: [22:54] – [23:20]

• How:

1. Open the Webflow Page Settings (or Site Settings).
2. Navigate to the GSAP section (if using the Webflow GSAP integration) or ensure the GSAP CDN script is included in the <head>.
3. Toggle "Enable GSAP".
4. Save changes.

• Why: The code written in Step 7 relies on the GreenSock Animation Platform. If the library isn't loaded, the hover effects will fail silently.

9. Verify Accessibility

Reference: [22:18] – [22:40]

• How: Enter Preview mode and use the Tab key to navigate to the button.
• Why: The provided script includes event listeners for focus and blur, ensuring that keyboard users experience the same animation and visual feedback as mouse users.

To achieve a realistic refractive effect, embed a custom SVG filter utilizing feDisplacementMap and link it to your button via the CSS property backdrop-filter: url('#id'). This method uses a texture map to mathematically distort the background content, creating a complex optical illusion that standard CSS blur cannot replicate.

You can create dynamic "soft-to-sharp" transitions by using GSAP to animate specific SVG attributes like stdDeviation (blur) and scale (distortion) on hover. By reducing the blur to zero and increasing the displacement scale during interaction, the element transforms from frosted glass to jagged ice.

A displacement map is a grayscale or colored texture image loaded into an SVG filter (via feImage) that acts as a topographic guide for pixel manipulation. Lighter and darker areas of this map dictate how much to "push or pull" the background pixels, enabling organic, liquid-like visual effects on interface elements.

To ensure high-end interactions are accessible, bind your GSAP animation logic to focus and blur event listeners in addition to standard mouse hover events. This practice ensures that users navigating with the Tab key experience the same visual feedback and state changes as mouse users.