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.