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.
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
Label — button text
Link — native Framer link picker for pages, URLs, sections, or email
New Tab — open link in a new browser tab
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
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
Glow — ambient glow intensity behind the button
Click Ripple — toggle expanding ring effect on click
Padding X — horizontal padding
Padding Y — vertical padding
Border Radius — corner rounding
Font Size — label text size
Font — native Framer font picker with family and weight
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.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
