Component

LiveNew

Shiny Button

::before (span absolute) con linear-gradient diagonale, translateX -100% → 150% on hover. Gated a hover:hover and pointer:fine.

ButtonHoverCSS

Open in Claude Sorgente

Esempio⁰¹

shiny-button.tsx

001Default · hover to sweep

002Card CTA · paired with description

Esperimenti settimanali

Apri un browser side-channel, prova un componente nuovo e copia il prompt nel tuo flusso.

003Toolbar · multiple buttons

tsxsrc/components/shiny-button.tsx

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

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

/**
 * <ShinyButton/> — solid inverted button with a glossy diagonal sweep that
 * appears only on fine-pointer hover. Pure CSS, no JS. The sweep is a
 * `::before`-equivalent absolutely-positioned span with a gradient, hidden
 * off-screen and translated across on hover.
 */
export function ShinyButton({ children, className, ...rest }: ShinyButtonProps) {
    return (
        <>
            <style>{`
                @media (hover: hover) and (pointer: fine) {
                    .shiny-button-shell:hover .shiny-button-sweep {
                        transform: translateX(150%);
                    }
                }
            `}</style>
            <button
                type="button"
                {...rest}
                className={cn(
                    "shiny-button-shell press relative isolate inline-flex items-center justify-center gap-2",
                    "min-h-[44px] rounded-md px-5 py-2",
                    "border border-border-strong bg-fg text-bg",
                    "font-sans text-sm font-medium",
                    "overflow-hidden",
                    className,
                )}
            >
                <span
                    aria-hidden
                    className="shiny-button-sweep pointer-events-none absolute inset-y-0 -left-[60%] w-[60%]"
                    style={{
                        background:
                            "linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.18) 45%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.18) 55%, transparent 100%)",
                        transform: "translateX(0)",
                        transition: "transform 1200ms var(--ease-in-out)",
                    }}
                />
                <span className="relative">{children}</span>
            </button>
        </>
    );
}

Note — Niente JS, niente state. Lo sweep è gated a fine pointer per non rimanere appiccicato sui touch device.

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 · shiny-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 <ShinyButton>: bottone solid con sweep diagonale on hover.
Props:
- children: ReactNode.
- className?: string + ...rest button props.

Implementazione:
- Server component (no "use client"). Classe press, min-h-[44px], rounded-md, bg-fg text-bg, border border-border-strong.
- Span ::before (assoluto) -left-[60%] w-[60%] inset-y-0 con linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%).
- @media (hover: hover) and (pointer: fine) → on hover translateX(150%), transition 1200ms var(--ease-in-out).

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

Uso tipico⁰³

tsx

<ShinyButton>Vedi Demo</ShinyButton>

Dipendenze⁰⁴

npm

tailwind-merge
clsx

Interno

@/lib/utils#cn

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

Catalogo Scrivimi feedback