Component

LiveNew

Rainbow Button

Faccia sobria sopra un conic-gradient ruotante a 6s. L'effetto vive su un layer blurred dietro il pulsante, niente JS per frame.

ButtonEffectClient

Open in Claude Sorgente

Esempio⁰¹

rainbow-button.tsx

001Default

002Pricing CTA · in context

Pro · €19/mese

Tutti i componenti, brand prompts, aggiornamenti settimanali.

003With icon

tsxsrc/components/rainbow-button.tsx

"use client";

import type { ButtonHTMLAttributes, ReactNode } from "react";
import { cn } from "@/lib/utils";

export type RainbowButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
    children: ReactNode;
    className?: string;
};

/**
 * <RainbowButton/> — neutral button face floating above an animated rainbow
 * conic-gradient halo. The halo lives on a blurred pseudo-layer and rotates
 * 360° on a 6s loop. Touch-target is 44×44 minimum, press feedback is the
 * shared `press` utility.
 */
export function RainbowButton({ children, className, ...rest }: RainbowButtonProps) {
    return (
        <>
            <style>{`
                @keyframes rainbow-rotate {
                    to { transform: rotate(360deg); }
                }
            `}</style>
            <button
                type="button"
                {...rest}
                className={cn(
                    "press relative inline-flex items-center justify-center gap-2",
                    "min-h-[44px] rounded-full px-5 py-2",
                    "border border-border-strong bg-bg-alt text-fg",
                    "font-sans text-sm font-medium",
                    "isolate",
                    "transition-[box-shadow,border-color] duration-200",
                    "[transition-timing-function:var(--ease-out)]",
                    "hover:border-fg-soft",
                    className,
                )}
            >
                <span
                    aria-hidden
                    className="pointer-events-none absolute -inset-[2px] -z-10 rounded-full"
                    style={{
                        background:
                            "conic-gradient(from 0deg, #ef4444, #f59e0b, #10b981, #2b7fff, #8b5cf6, #ef4444)",
                        animation: "rainbow-rotate 6s linear infinite",
                        filter: "blur(10px)",
                        opacity: 0.55,
                    }}
                />
                <span aria-hidden className="absolute inset-0 -z-10 rounded-full bg-bg-alt" />
                <span className="relative">{children}</span>
            </button>
        </>
    );
}

Note — Min-height 44px per touch. Press utility per il feedback. La rotazione è pura CSS — il global guard di prefers-reduced-motion la collassa automaticamente.

Prompt LLM⁰²

Incolla in Claude o ChatGPT per generare la tua variante. Include il contesto del brand, i token e i vincoli del progetto.

Prompt · rainbow-button

Sei un senior frontend engineer. Stai lavorando su un sito Next.js 16 + React 19 + Tailwind v4 in italiano, look chanhdai-inspired: colonna stretta 672px, Geist Sans + Geist Mono, hairline 1px, divisori a stripe diagonale, palette zinc.

Token CSS disponibili: --bg, --bg-alt, --fg, --fg-muted, --fg-soft, --border, --border-strong, --accent. Usa SEMPRE queste variabili tramite le utility tailwind generate (bg-bg, text-fg-muted, border-border, ecc.). Helper "cn" da "@/lib/utils". Niente librerie UI extra: solo lucide-react e tailwind-merge.

Genera un componente <RainbowButton> CTA.
Type:
- RainbowButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode; className?: string }

Implementazione:
- "use client" non necessario (pure CSS).
- Bottone rounded-full, min-h-[44px] px-5 py-2, border border-border-strong bg-bg-alt text-fg, classe press.
- Pseudo-layer in absolute -inset-[2px] -z-10 con conic-gradient di 5 stop (red-500, amber-500, emerald-500, blue-500, violet-500), filter blur(10px), opacity 0.55, animation rainbow-rotate 6s linear infinite (@keyframes da definire inline via <style>).
- Sotto al gradient un secondo span absolute inset-0 -z-10 rounded-full bg-bg-alt che fa da maschera per dare l'effetto "alone esterno".

Output: file completo src/components/rainbow-button.tsx.

Uso tipico⁰³

tsx

<RainbowButton onClick={...}>Inizia ora</RainbowButton>

Dipendenze⁰⁴

npm

lucide-react
tailwind-merge
clsx

Interno

@/lib/utils#cn

Ti è servito? Dimmelo, oppure proponi il prossimo componente.

Catalogo Scrivimi feedback