---
title: "Gradient Flow Button — Free Framer component · Best of Framer"
description: "Free Framer component · by Aidan Looker · Buttons. What is Gradient Flow Button?"
canonical: "https://framer.elliotli.dev/component/gradient-flow-button"
---

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

# Gradient Flow Button

Animated gradient border button.

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

![Gradient Flow Button preview image 1](https://framer.elliotli.dev/og/component/gradient-flow-button/673786c74251c1d0/1600x1200.jpg)

## Summary

What is Gradient Flow Button?

## Description

## What is Gradient Flow Button?

Gradient Flow Button is a premium interactive button component with a seamlessly animated multi-color gradient border, ambient glow, and hover-triggered text shimmer. Designed for landing pages, hero sections, and call-to-action areas where you need a button that draws attention and feels polished. Ideal for SaaS sites, portfolios, product launches, and any project where first impressions matter.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Continuously flowing animated gradient border with seamless looping and no visible seam
    
-   6 curated color presets — Aurora, Sunset, Ocean, Neon, Emerald, Monochrome — plus a fully custom mode with 3 gradient color pickers
    
-   Hover-triggered text shimmer effect with animated gradient highlight sweeping across the label
    
-   Pulsing ambient glow behind the button with adjustable intensity
    
-   Smooth scale-up on hover, spring-based tap animation, and optional click ripple rings
    
-   7 built-in icons with left or right positioning
    
-   Adjustable gradient animation speed — Slow, Medium, or Fast
    

## Controls inside Framer

### Essentials

-   Label — button text
    
-   Link — destination URL
    
-   New Tab — open link in a new tab
    
-   Preset — Aurora, Sunset, Ocean, Neon, Emerald, Monochrome, or Custom
    

### Icon

-   Icon — None, Arrow Right, Arrow Diagonal, Chevron, Plus, Sparkle, Lightning, Star
    
-   Icon Side — Left or Right
    

### Colors (Custom preset only)

-   Background — button fill color
    
-   Gradient 1 — first gradient stop
    
-   Gradient 2 — second gradient stop
    
-   Gradient 3 — third gradient stop
    
-   Text — label color
    

### Effects

-   Gradient Speed — Slow, Medium, or Fast
    
-   Text Shimmer — animated gradient text on hover
    
-   Click Ripple — expanding ring effect on click
    
-   Glow — intensity of the ambient glow behind the button
    

### Sizing

-   Padding X — horizontal padding
    
-   Padding Y — vertical padding
    
-   Radius — corner radius
    
-   Font Size — label size
    

### Font

-   Font — font picker with family and weight
    

## Best use cases

-   Hero section CTAs on landing pages and product sites
    
-   Signup, purchase, or download buttons that need to stand out
    
-   Portfolio and agency sites seeking a premium interactive feel
    
-   Dark-themed designs where animated color draws attention without overwhelming
    

Ship polished, animated call-to-action buttons in seconds — just drag, drop, and publish.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [contact@teampixel.com.au](mailto:contact@teampixel.com.au)

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

-   All · #7298

## Details

- **Author**: Aidan Looker
- **Published**: 2026-04-02
- **Updated**: 2026-06-13
- **Added**: 2026-03-25
- **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