Gradient Button

Buttons 1

About

A button with gradient inside, gradient on border, both of them are animated on hover.

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

Code

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

Usage.tsx

import { CheckCircle, Lightbulb, Heart } from "lucide-react";
import { Component } from "@/components/ui/gradient-button";

export default function DemoOne() {
    return (
    <div className="min-h-screen bg-black flex items-center justify-center p-8 w-full">
      <div>
          <div className="rounded-2xl p-8 border border-gray-700 flex flex-col items-center">
            <h3 className="text-xl font-semibold text-white mb-6">Vertical</h3>
            <div className="mb-4 gap-1 flex flex-col">
                          <Component
                icon={<CheckCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#10b981"
                textColor="text-green-200"
                label="Done"
                size="sm"
                className="max-w-[70px]"
                onClick={() => alert("Success tag clicked!")}
              />
              <Component
                icon={<Lightbulb className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#eab308"
                textColor="text-yellow-200"
                label="Brilliant Idea"
                size="md"
                onClick={() => alert("Idea tag clicked!")}
              />
                            <Component
                icon={<Heart className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#ec4899"
                textColor="text-pink-200"
                label="Favorite"
                size="lg"
              />
            </div>
        </div>
        <div className="mt-16 rounded-2xl p-8 border border-gray-700 flex flex-col items-center">
            <h3 className="text-xl font-semibold text-white mb-6">Horizontal</h3>
            <div className="mb-4 gap-3 flex">
                          <Component
                icon={<CheckCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#10b981"
                textColor="text-green-200"
                label="Done"
                size="sm"
                className="max-w-[70px]"
                onClick={() => alert("Success tag clicked!")}
              />
              <Component
                icon={<Lightbulb className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#eab308"
                textColor="text-yellow-200"
                label="Brilliant Idea"
                size="md"
                onClick={() => alert("Idea tag clicked!")}
              />
                            <Component
                icon={<Heart className="h-4 w-4 flex-shrink-0" strokeWidth={2} />}
                bgColor="#ec4899"
                textColor="text-pink-200"
                label="Favorite"
                size="lg"
              />
            </div>
        </div>
      </div>
    </div>
  );
}