Button Lustre

What is Button Lustre?

What is Button Lustre? Button Lustre is a premium call-to-action button featuring a living, morphing gradient fill. Three color blobs drift organically across the button surface, creating a fluid, lava-lamp-like effect that keeps your interface feeling alive. On hover, each letter of the label individually rolls upward in a staggered wave, paired with spring-animated icon movement. Ideal for hero sections, pricing pages, feature highlights, and anywhere you need a CTA that commands attention. Core Features Organic morphing gradient fill — three independent color blobs drift across the button surface on separate animation cycles, creating a fluid, ever-changing gradient that never repeats the same pattern Per-character rolling text animation — on hover, each letter individually rolls upward with staggered timing, producing a premium cascading wave effect across the label Five curated color presets — Rose, Violet, Ocean, Ember, and Slate palettes designed to work out of the box, plus a fully customisable mode for complete creative control Built-in icon library — eight icon options including arrows, chevron, sparkle, lightning, and star, with animated hover scaling and directional shift Click ripple feedback — expanding concentric rings pulse outward from the click position, adding satisfying tactile interaction Ambient glow shadow — a soft, pulsing glow behind the button intensifies on hover, adding depth without overwhelming the design Controls inside Framer Essential Label — button text Link — native Framer link picker for pages, URLs, sections, or email New Tab — open link in a new browser tab Appearance Preset — Rose, Violet, Ocean, Ember, Slate, or Custom Icon — None, Arrow Right, Arrow Diagonal, Chevron, Plus, Sparkle, Lightning, Star Icon Side — Left or Right placement Colors (Custom preset) Base — dark foundation fill color Color 1 — first gradient blob Color 2 — second gradient blob Color 3 — third gradient blob Text — label and icon color Effects Glow — ambient glow intensity behind the button Click Ripple — toggle expanding ring effect on click Sizing Padding X — horizontal padding Padding Y — vertical padding Border Radius — corner rounding Font Size — label text size Typography Font — native Framer font picker with family and weight Best use cases Hero section CTAs that need to stand out with movement and color Pricing page action buttons paired with card layouts Product launch pages where visual polish drives conversions Portfolio and agency sites that demand premium, modern interactions A single component that replaces flat, static buttons with a living, breathing call to action. Drop it onto your canvas, pick a preset, and publish. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Gradient button with rolling text.