Gradient Flow Button — Animated gradient border button.

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.

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