Create playful liquid hover interactions directly inside Framer. This component blends the button label and icon using an SVG-powered gooey filter and separates them smoothly on hover.
Watch the full tutorial and walkthrough here:
Gooey Liquid Button is a fully customizable Framer Code Component designed to add fluid hover interactions to your UI without writing animation code.
Using SVG filter technology, the icon and label visually merge at rest and smoothly separate on hover, creating a soft liquid motion effect.
The component integrates the Material Symbols icon library, giving you access to thousands of icons without importing external assets.
All visual parameters — including spacing, typography, icon appearance, and animation easing — can be adjusted directly from the Framer property panel.
Because the effect is SVG-based, the liquid blend works seamlessly on any background and remains crisp at any scale.
No external libraries, no plugins, and no setup required.
Gooey liquid melt effect powered by SVG filters
Works on any background thanks to SVG rendering
Access to the Material Symbols icon library
Smooth icon separation animation on hover
Customizable typography, colors, and layout
Built-in easing presets and custom cubic-bezier animation support
Fully configurable through Framer property controls
Clean, production-ready implementation
1 Main Code Component (GooeyLiquidButton)
Full Property Controls Panel
Future updates included
You can update anytime through:
Assets → Components inside Framer.
Install the component from the Framer Marketplace
Insert the component from Assets → Components
Enter your button label text
Add a Material Symbols icon name
Adjust Default Gap to create the gooey overlap
Set Hover Gap to control the separation distance
Customize colors, typography, and animation
No additional setup required.
Use a negative Default Gap to create a stronger gooey merge
Use a positive Hover Gap for smooth icon separation
Rounded border radius enhances the liquid effect
Try different Material Symbols icons to match your design
Avoid extremely large gap values to maintain visual consistency
Due to the digital nature of this product and immediate access after purchase, refunds are generally not provided.
If you encounter technical issues or believe something is not working as described, please contact me directly. I'm happy to help resolve any problems promptly.
If you need help or have questions:
Contact: cobopso@gmail.comResponse time: 24–48 hours
I actively maintain and improve this component based on user feedback.
Khannh huu
