---
title: "Liquid AnimateButton — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Víctor S · Buttons. A sleek, animated liquid gradient."
canonical: "https://framer.elliotli.dev/component/liquid-animatebutton"
---

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

# Liquid AnimateButton

A sleek, animated liquid gradient.

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

![Liquid AnimateButton preview image 1](https://framer.elliotli.dev/og/component/liquid-animatebutton/6e81828d662f9490/1600x1200.jpg)

## Summary

A sleek, animated liquid gradient.

## Description

[Live Demo](https://liquidbuttoncomponent.framer.website/)

**Give your Call-to-Action a premium, high-end feel.**

The Liquid Border Button is a professional-grade Framer component designed to help your most important buttons pop. Featuring a smooth, infinite rotating gradient effect, this button creates a sophisticated "glass-like" liquid border that immediately draws the eye and encourages interaction.

Unlike standard static buttons, this component provides a dynamic visual experience that feels premium and polished—perfect for hero sections, landing pages, or anywhere you need to increase conversion rates.

**Built for Framer Designers:** We know you need components that fit into your workflow, not ones that break it. That’s why we’ve built this with native Framer controls:

-   **Native Link Support:** Easily connect your button to any page, URL, or overlay using Framer’s built-in link system.
    
-   **Complete Customization:** Tweak every aspect of the button—from the liquid accent colors to the border width and corner radius—directly from the right-hand properties panel.
    
-   **Native Font Picker:** Manage your typography using Framer’s native font controls, ensuring your button style stays perfectly synced with your site's global styles.
    
-   **Precision Padding:** We’ve replaced rigid settings with individual padding controls (Top, Bottom, Left, Right), giving you absolute control over your button's footprint.
    
-   **High Performance:** Built with Framer Motion and GPU-accelerated transforms, the liquid animation is buttery smooth and light on your site’s performance.
    

**What’s included:**

-   Liquid Border Button Component.
    
-   Fully editable property controls.
    
-   Responsive design documentation.
    

**Stop settling for static designs.** Elevate your project with an interactive element that feels custom-coded, but works right out of the box.

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

-   All · #9890

## Details

- **Author**: Víctor S
- **Price**: $10.00
- **Published**: 2026-06-19
- **Updated**: 2026-07-23
- **Added**: 2026-06-19
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything