Gradient Flow Button

Animated gradient border button. by Aidan Looker

Show Preview
Gradient Flow Button

About Gradient Flow 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