---
title: "Magic 3D Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Abishek M · Buttons. High-end animated 3D magic button"
canonical: "https://framer.elliotli.dev/component/magic-3d-button"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Magic 3D Button

# Magic 3D Button

High-end animated 3D magic button

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

![Magic 3D Button preview image 1](https://framer.elliotli.dev/og/component/magic-3d-button/10908c5be5731001/1600x1200.jpg)

## Summary

High-end animated 3D magic button

## Description

## Elevate your UI with Liquid Magic

Add a touch of magic to your Framer projects with this high-performance, interactive button component. Designed with precision physics and fluid motion, it provides a tactile experience that goes beyond standard web buttons.

### ✨ Key Features

-   **Fluid Liquid Physics:** The button features a unique skewed, rotating container that feels organic and alive.
    
-   **Staggered Text Animations:** Every character is treated as an individual element, creating a beautiful "fly-away" effect when clicked.
    
-   **Interactive Success State:** Built-in logic that smoothly transitions from your call-to-action to a custom "Success" or "Thank You" message after a short delay.
    
-   **Dynamic Glow & Shadows:** Multi-layered shadows and a sweeping "light-streak" outline that activates on hover.
    
-   **SVG Splash Effects:** Includes integrated vector splash animations that trigger on interaction.
    

### 🎨 Full Control at Your Fingertips

This component is built to be flexible. You don't need to touch a single line of code to make it yours:

-   **Custom Success Message:** Toggle between your initial text and a secondary message for post-click interaction.
    
-   **5-Point Color Gradient:** Fine-tune the liquid look using five distinct primary color slots.
    
-   **Shadow & Text Controls:** Easily adjust the depth of the button and the color/size of your typography.
    
-   **Adaptive Sizing:** Fully responsive width, height, and border-radius controls.
    

### 🚀 How to Use

1.  Drag the component onto your canvas.
    
2.  Update the **Text** and **Success Text** in the properties panel.
    
3.  Match the **Primary Colors** to your brand’s palette.
    
4.  Set the **Font Family** to your project's primary typeface.
    

**Perfect for:** Landing pages, waitlists, premium SaaS dashboards, and high-conversion "Join" or "Submit" actions.

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

-   All · #6098

## Details

- **Author**: Abishek M
- **Published**: 2026-05-29
- **Updated**: 2026-05-29
- **Added**: 2026-05-15
- **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