Overview
Premium Button pairs a high-contrast lime-yellow multi-stop gradient with a 300msbg-position hover transition to create a shimmering color shift. A built-in SVG crown icon reinforces the premium visual identity without any external icon dependency.
Installation
components/rareui/premium-button.tsx.
Usage
This component does not accept props. To customize colors, text, or icon, edit the component source directly after installation.
Props
This component does not expose props. All styling is baked into the Tailwind class list. Modify the source file after installation to adjust the gradient stops, label text, or icon.Examples
Basic usage
Inside a flex container
Wrapping in a link
Features
Animated gradient background
An 8-stop lime-yellow gradient shifts from
bg-left to bg-right on hover via background-position transition.Built-in crown icon
An inline SVG crown mark is included — no external icon library required.
Text and box shadows
Lime-tinted
text-shadow and a diffused box-shadow add perceived depth.Smooth transitions
Background and color properties transition at 300ms
ease-out for a polished feel.