Gradient Flow Button

What is 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

Animated gradient border button.