---
title: "WebGL Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Nazam Azam · Buttons. Full Description WebGL Button is an interactive, code-based button component that renders a real-time WebGL liquid simulation inside its shape —…"
canonical: "https://framer.elliotli.dev/component/webgl-button"
---

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

# WebGL Button

Animated liquid-fill button

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

![WebGL Button preview image 1](https://framer.elliotli.dev/og/component/webgl-button/78545ee606f63867/1600x1128.jpg)

## Summary

Full Description WebGL Button is an interactive, code-based button component that renders a real-time WebGL liquid simulation inside its shape — no video, no GIF, just live shader…

## Description

**Full Description**

WebGL Button is an interactive, code-based button component that renders a real-time WebGL liquid simulation inside its shape — no video, no GIF, just live shader animation. Move your cursor across it and the liquid tilts and sloshes; click it and it "gulps" down before settling back.

Fully customizable directly from the Framer properties panel, no code editing required:

-   **Liquid Color** — recolor the animated liquid to match your brand
    
-   **Background** — set the button's base color independently of the liquid
    
-   **Typography** — full font control (family, weight, size, letter-spacing) via Framer's native font picker
    
-   **Text Color**
    
-   **Icon Image** — upload your own icon (SVG/PNG), with adjustable size and gap from the label
    
-   **Padding** — size the button by adjusting padding rather than dragging the frame, so it always hugs its content
    
-   **Corner Radius**
    
-   **Link** — turn it into a working link with optional new-tab behavior, or leave it as a plain interactive button
    

Great for hero CTAs, form submit buttons, or any spot where a subtle, tactile animation adds polish without feeling gimmicky.

**Key Features**

-   Live WebGL shader animation, not a video/GIF
    
-   Cursor-reactive tilt and slosh physics
    
-   Click "gulp" interaction
    
-   Fully themeable: liquid color, background, text, icon
    
-   Custom icon upload with size/gap controls
    
-   Auto-sizing via padding (hug-content behavior)
    
-   Works as a button or a link (with new-tab option)
    
-   Follows Framer's static-render guidelines (no animation on canvas/export, only in live Preview/published site)
    

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

-   All · #5450

## Details

- **Author**: Nazam Azam
- **Published**: 2026-07-07
- **Updated**: 2026-07-07
- **Added**: 2026-07-07
- **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