Fancy Button

A vibrant, animated button component with neobrutalism styling, featuring gradient backgrounds and interactive hover effects.

Usage

import FancyButton from '@/components/fancy-button';
import { Sparkles } from 'lucide-react';

export default function MyPage() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <FancyButton onClick={handleClick}>
      <Sparkles className="mr-2" size={16} />
      Get Premium
    </FancyButton>
  );
}

Examples

Basic Fancy Button

A colorful animated button with default styling.

<FancyButton onClick={() => alert('Button clicked!')}>
  Click Me!
</FancyButton>

With Icon

Button with an icon alongside text.

<FancyButton 
  onClick={() => alert('Getting premium...')}
  className="bg-purple-400"
>
  <Sparkles className="mr-2" size={16} />
  Get Premium
</FancyButton>

Custom Background Color

Button with a custom background color.

<FancyButton 
  className="bg-green-400"
>
  Download Now <Download className="ml-2" size={16} />
</FancyButton>

Full Width Button

Button that spans the full width of its container.

<FancyButton 
  fullWidth
  className="bg-blue-400"
>
  <ShoppingCart className="mr-2" size={16} />
  Add to Cart
</FancyButton>