---
title: "Button Lustre — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Aidan Looker · Buttons. What is Button Lustre?"
canonical: "https://framer.elliotli.dev/component/button-lustre"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Button Lustre

# Button Lustre

Gradient button with rolling text.

[View on Framer](https://framer.com/marketplace/components/button-lustre/?via=elliot-li)

![Button Lustre preview image 1](https://framer.elliotli.dev/og/component/button-lustre/14525fd1e478fd2e/1600x1200.jpg)

## Summary

What is Button Lustre?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #11292

## Details

- **Author**: Aidan Looker
- **Price**: $4.00
- **Published**: 2026-04-16
- **Updated**: 2026-06-13
- **Added**: 2026-04-03
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything