---
title: "SplashGradientButton — Free Framer component · Best of Framer"
description: "Free Framer component · by Saadat Ali · Buttons. Splash Gradient Button with Blob Motion"
canonical: "https://framer.elliotli.dev/component/splashgradientbutton"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/SplashGradientButton

# SplashGradientButton

Splash Gradient Button with Blob Motion

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

![SplashGradientButton preview image 1](https://framer.elliotli.dev/og/component/splashgradientbutton/8a4d608a1bc45266/1600x1200.jpg)

## Summary

Splash Gradient Button with Blob Motion

## Description

\-----------------------------------------------------------------------------------------------

## Add More Premium Components To Your Projects:

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-g094t2v1-8wrj2R4JsfS8dz3uRkUmPxMk3a0JAx)](https://marketplace.framer.com/@saadat-ali-designsbysadat/)

### Key Features:

-   **Organic "Blob" Animation**: Uses a randomized motion pattern for a fluid, liquid-like background effect.
    
-   **Custom SVG Integration**: Simply paste your SVG code to swap icons instantly.
    
-   **Interactive Hover States**: Smoothly transitions background and text colors for a tactile user experience.
    
-   **Tailored Typography**: Integrated with Framer’s font picker for total brand alignment.
    
-   **Responsive & Lightweight**: Built with clean React code and Framer Motion for buttery-smooth performance.
    

### How to use:

1.  Drag the component onto your canvas.
    
2.  Adjust your **Blob Colors** to match your brand palette.
    
3.  Customize your padding and radius to fit your layout.
    
4.  Drop in your link, and you’re ready to go!
    

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

-   All · #3990

## Details

- **Author**: Saadat Ali
- **Published**: 2026-03-18
- **Updated**: 2026-06-15
- **Added**: 2026-03-09
- **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