Button Ui

Buttons 2

About

Here is Button Ui components

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

Code

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

Usage.tsx

"use client";

import React from "react";

export default function Example() {
    return (
        <>
            <style>{`
                @keyframes rotate {
                    0% {
                        transform: rotate(70deg);
                    }
            
                    50% {
                        transform: rotate(100deg);
                    }
            
                    100% {
                        transform: rotate(70deg);
                    }
                }
            
                .rainbow::before {
                    content: '';
                    position: absolute;
                    z-index: -2;
                    left: -50%;
                    top: -50%;
                    width: 200%;
                    height: 200%;
                    background-position: 100% 50%;
                    background-repeat: no-repeat;
                    background-size: 50% 30%;
                    filter: blur(6px);
                    background-image: linear-gradient(#FFF);
                    animation: rotate 4s ease-in-out infinite;
                }
            `}</style>
            <div className="rainbow relative z-0 bg-white/15 overflow-hidden p-0.5 flex items-center justify-center rounded-full hover:scale-105 transition duration-300 active:scale-100">
                <button className="px-8 text-sm py-3 text-white rounded-full font-medium bg-gray-900/80 backdrop-blur">
                    Click Me
                </button>
            </div>
        </>
    );
};