---
title: "Draw Liquid Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Buttons. About Draw Liquid Button is an eye-catching, interactive button component for Framer featuring a custom line-drawing liquid fill animation."
canonical: "https://framer.elliotli.dev/component/draw-liquid-button"
---

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

# Draw Liquid Button

line-drawing liquid fill animation

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

![Draw Liquid Button preview image 1](https://framer.elliotli.dev/og/component/draw-liquid-button/d49ea27cd056ae5a/1600x1057.jpg)

## Summary

About Draw Liquid Button is an eye-catching, interactive button component for Framer featuring a custom line-drawing liquid fill animation.

## Description

## About

**Draw Liquid Button** is an eye-catching, interactive button component for Framer featuring a custom line-drawing liquid fill animation. Upon hovering, the button border dynamically unwinds as a multi-stage liquid drip keyframe effect flows in to paint the button background while seamlessly expanding the text tracking.

Built with clean CSS keyframe pipelines and semantic HTML tags, **Draw Liquid Button** brings high-energy micro-interactions to modern websites, creative portfolios, and landing page CTAs.

## What it does

-   **Sequential Liquid Line Drawing:** Triggers a synchronized CSS animation sequence on hover that draws organic liquid strokes into the button body.
    
-   **Dynamic Letter Spacing:** Expands typography tracking smoothly on mouse entry for a responsive visual feedback effect.
    
-   **Curated Color Presets:** Comes with pre-configured color themes (_Pink, Blue, Teal_) alongside full custom color overrides.
    
-   **Dual Element Tag Support:** Automatically switches between native `<button>` and standard `<a>` hyperlink anchor tags depending on whether a destination link is supplied.
    
-   **Full Accessibility & SSR Optimized:** Includes static renderer fallbacks for Framer canvas exports, explicit ARIA attributes, disabled state handling, and keyboard interaction support (`Enter` / `Space`).
    

## What you can customize

Everything is fully configurable directly from Framer’s right-hand property panel:

-   **Text & Links:** Set custom button text, destination URL, open-in-new-tab toggles, and accessible ARIA labels.
    
-   **Themes & Palette:** Select from built-in theme presets (_Pink, Blue, Teal_) or switch to _Custom_ mode to control line stroke and background fill colors.
    
-   **Liquid & Stroke Thickness:** Adjust drip size and liquid fill thickness directly with step controls.
    
-   **Hover Letter Spacing:** Set exact target tracking distances on hover.
    

## Need help?

Have questions or feedback? Reach out anytime at [**karimsaif010@gmail.com**](mailto:karimsaif010@gmail.com) or on X **@karimsaif0**.

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

-   All · #5980

## Details

- **Author**: Karim Saif
- **Published**: 2026-07-24
- **Updated**: 2026-07-24
- **Added**: 2026-07-24
- **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