Shiny Button

Buttons 266

About

A beautiful, animated, and theme-aware circular button component built with Tailwind CSS. Includes hover effects, rotating transitions, gradient overlays, and support for custom icons. Perfect for modern dashboards, media apps, or landing pages that need a premium visual punch.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Shiny Button to your project and fits it to your theme.

Code

How Shiny Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FaYoutube, FaXTwitter, FaSpotify, FaReact } from 'react-icons/fa6';
import FancyButton from '@/components/ui/shiny-button';

export default function DemoOne(){
  return (
    <div className="grid grid-cols-2 gap-6 max-w-md mx-auto">
      <FancyButton icon={<FaReact size={28} />} variant="default" />
      <FancyButton icon={<FaSpotify size={28} className="text-green-500" />} variant="green" />
      <FancyButton icon={<FaXTwitter size={28} className="text-indigo-500" />} variant="indigo" />
      <FancyButton icon={<FaYoutube size={28} className="text-red-500" />} variant="red" />
    </div>
  );
};