Button

Buttons

About

This is animated live button

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.

Code

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

Usage.tsx

"use client";

import React from "react";
import { LiveButton, type LiveButtonData } from "@/components/ui/button";

export default function DemoOne() {
   const handleLiveButtonClick = () => {
    console.log("Live button clicked!");
  };

  const liveButtonData: LiveButtonData = {
    text: "Now Live",
    href: "https://www.youtube.com/",
    target: "_blank",
    showIcon: true,
    pulseAnimation: true,
    size: "medium",
    variant: "red",
  };

  return (
    <div className="relative w-full h-screen overflow-hidden">
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 z-50">
        <LiveButton data={liveButtonData} onClick={handleLiveButtonClick} />
      </div>
    </div>
  );
}