Button

GradientButton is a reusable UI component that renders a visually appealing button with a blue gradient background. It accepts customizable button text and an onClick handler, making it suitable for use in forms, dialogs, or any interactive UI where a call-to-action button is needed. The component is styled for modern interfaces and provides a smooth hover effect for enhanced user experience.

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

import { GradientButton } from "@/components/ui/button";

const DemoOne = () => {
  return (
    <div className="flex bg-white w-full h-screen justify-center items-center">
      <GradientButton 
        text="Hover Me" 
        onClick={() => console.log("Button clicked!")}
      />
    </div>
  );
};

export { DemoOne };