---
title: "Gooey Liquid Button — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Khannh huu · Buttons. Gooey Liquid Button Smooth Gooey Hover Button for Framer Create playful liquid hover interactions directly inside Framer."
canonical: "https://framer.elliotli.dev/component/gooey-liquid-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Gooey Liquid Button

# Gooey Liquid Button

Gooey SVG Button with Custom Animation

[View on Framer](https://framer.com/marketplace/components/gooey-liquid-button/?via=elliot-li)

![Gooey Liquid Button preview image 1](https://framer.elliotli.dev/og/component/gooey-liquid-button/d41834046a6f89f5/1600x1200.jpg)

## Summary

Gooey Liquid Button Smooth Gooey Hover Button for Framer Create playful liquid hover interactions directly inside Framer.

## Description

## Gooey Liquid Button

### Smooth Gooey Hover Button for Framer

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.

### Introduction

Watch the full tutorial and walkthrough here:

### Overview

**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.

### Key Features

-   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
    

### Controls

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g7p9k594-5wxiGEVnY1iVcyczXbr7LgEemafx2d)

### What's Included

-   **1 Main Code Component** (GooeyLiquidButton)
    
-   Full **Property Controls Panel**
    
-   **Future updates included**
    

You can update anytime through:

Assets → Components inside Framer.

### How to Use

1.  Install the component from the **Framer Marketplace**
    
2.  Insert the component from **Assets → Components**
    
3.  Enter your **button label text**
    
4.  Add a **Material Symbols icon name**
    
5.  Adjust **Default Gap** to create the gooey overlap
    
6.  Set **Hover Gap** to control the separation distance
    
7.  Customize colors, typography, and animation
    

No additional setup required.

### Best Practices

-   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
    

### Refund Policy

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.

### Support

If you need help or have questions:

**Contact:** [cobopso@gmail.com](mailto:cobopso@gmail.com)**Response time:** 24–48 hours

I actively maintain and improve this component based on user feedback.

## Rank history [How rankings work →](/terms#rankings)

-   All · #6206

## Details

- **Author**: Khannh huu
- **Price**: $5.00
- **Published**: 2026-03-13
- **Updated**: 2026-03-13
- **Added**: 2026-03-10
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow