From AI generate buttons with shimmer sweeps to 3D push, neon glow and stateful actions — every button is production-ready, accessible and copy-paste friendly.
AI Action Buttons
Shimmer sweep, gradient ring and pulse glow — the signature buttons of AI-era interfaces. Click Generate to see the working state.
| 1 | function GenerateButton() { |
| 2 | const [state, setState] = useState<"idle" | "working" | "done">("idle"); |
| 3 | |
| 4 | const run = () => { |
| 5 | setState("working"); |
| 6 | setTimeout(() => setState("done"), 1800); |
| 7 | setTimeout(() => setState("idle"), 3200); |
| 8 | }; |
| 9 | |
| 10 | return ( |
| 11 | <button |
| 12 | "color:#79c0ff">onClick={run} |
| 13 | "color:#79c0ff">disabled={state === "working"} |
| 14 | "color:#79c0ff">className="relative overflow-hidden rounded-xl bg-gradient-to-r from-violet-600 via-fuchsia-600 to-indigo-600 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-violet-500/40 transition-all hover:shadow-violet-500/60 hover:scale-[1.02] active:scale-95 disabled:opacity-80" |
| 15 | "color:#79c0ff">style={{ backgroundSize: "200% 100%", animation: "gradientShift 4s ease infinite" }} |
| 16 | > |
| 17 | {/* shimmer sweep */} |
| 18 | <span |
| 19 | "color:#79c0ff">className="pointer-events-none absolute inset-y-0 w-12 bg-white/30 blur-md" |
| 20 | "color:#79c0ff">style={{ animation: "sheen 2.4s ease infinite" }} |
| 21 | /> |
| 22 | <span "color:#79c0ff">className="relative flex items-center gap-2"> |
| 23 | {state === "working" ? ( |
| 24 | <> |
| 25 | <svg "color:#79c0ff">className="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none"> |
| 26 | <circle "color:#79c0ff">className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" /> |
| 27 | <path "color:#79c0ff">className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" /> |
| 28 | </svg> |
| 29 | Generating… |
| 30 | </> |
| 31 | ) : state === "done" ? ( |
| 32 | <>✓ Done</> |
| 33 | ) : ( |
| 34 | <>✦ Generate</> |
| 35 | )} |
| 36 | </span> |
| 37 | </button> |
| 38 | ); |
| 39 | } |
| 40 | |
| 41 | /* keyframes: |
| 42 | @keyframes sheen { 0% { transform: translateX(-150%) skewX(-18deg); } 100% { transform: translateX(280%) skewX(-18deg); } } |
| 43 | @keyframes gradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } */ |
Core Buttons
Solid, soft, outline, ghost and destructive variants in three sizes — the daily drivers of any interface.
| 1 | <button "color:#79c0ff">className="rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-violet-500 active:scale-95">Primary</button> |
| 2 | <button "color:#79c0ff">className="rounded-lg bg-violet-500/15 px-5 py-2.5 text-sm font-semibold text-violet-300 ring-1 ring-inset ring-violet-500/25 transition hover:bg-violet-500/25">Soft</button> |
| 3 | <button "color:#79c0ff">className="rounded-lg border border-white/15 px-5 py-2.5 text-sm font-semibold text-white/85 transition hover:border-white/35 hover:bg-white/5">Outline</button> |
| 4 | <button "color:#79c0ff">className="rounded-lg px-5 py-2.5 text-sm font-semibold text-white/60 transition hover:bg-white/8 hover:text-white">Ghost</button> |
| 5 | <button "color:#79c0ff">className="rounded-lg bg-red-500/90 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-red-500 active:scale-95">Delete</button> |
| 6 | |
| 7 | {/* sizes */} |
| 8 | <button "color:#79c0ff">className="rounded-md bg-violet-600 px-3 py-1.5 text-xs font-semibold text-white">Small</button> |
| 9 | <button "color:#79c0ff">className="rounded-lg bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white">Medium</button> |
| 10 | <button "color:#79c0ff">className="rounded-xl bg-violet-600 px-7 py-3.5 text-base font-semibold text-white">Large</button> |
Gradient & Glow
Saturated gradients with colored shadows that lift on hover — instant visual hierarchy for primary actions.
| 1 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-600 to-indigo-600 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-violet-500/35 transition-all hover:shadow-violet-500/60 hover:-translate-y-0.5 active:translate-y-0"> |
| 2 | Deploy now |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-fuchsia-500 to-pink-600 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-pink-500/35 transition-all hover:shadow-pink-500/60 hover:-translate-y-0.5"> |
| 5 | Get Pro |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-3 text-sm font-bold text-white shadow-lg shadow-emerald-500/35 transition-all hover:shadow-emerald-500/60 hover:-translate-y-0.5"> |
| 8 | Confirm |
| 9 | </button> |
| 10 | <button "color:#79c0ff">className="rounded-full bg-gradient-to-r from-amber-400 via-orange-500 to-rose-500 px-7 py-3 text-sm font-bold text-white shadow-xl shadow-orange-500/40 transition-all hover:scale-[1.03]"> |
| 11 | 🔥 Trending |
| 12 | </button> |
Stateful Buttons
Loading → success morphing, live copy-to-clipboard and disabled states. Click them — they actually work.
| 1 | function SaveButton() { |
| 2 | const [state, setState] = useState<"idle" | "saving" | "saved">("idle"); |
| 3 | |
| 4 | const save = () => { |
| 5 | setState("saving"); |
| 6 | setTimeout(() => setState("saved"), 1400); |
| 7 | setTimeout(() => setState("idle"), 2800); |
| 8 | }; |
| 9 | |
| 10 | return ( |
| 11 | <button |
| 12 | "color:#79c0ff">onClick={save} |
| 13 | "color:#79c0ff">disabled={state === "saving"} |
| 14 | "color:#79c0ff">className={ |
| 15 | "flex w-36 items-center justify-center gap-2 rounded-xl px-5 py-2.5 text-sm font-bold text-white transition-all active:scale-95 " + |
| 16 | (state === "saved" ? "bg-emerald-500" : "bg-violet-600 hover:bg-violet-500") |
| 17 | } |
| 18 | > |
| 19 | {state === "saving" && <Spinner "color:#79c0ff">className="h-4 w-4 animate-spin" />} |
| 20 | {state === "idle" && "Save changes"} |
| 21 | {state === "saving" && "Saving…"} |
| 22 | {state === "saved" && "✓ Saved"} |
| 23 | </button> |
| 24 | ); |
| 25 | } |
Icon Buttons & FAB
Leading icons, icon-only rounds and floating action buttons with rotation and scale micro-interactions.
| 1 | {/* leading icon */} |
| 2 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-xl bg-violet-600 px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-violet-500 active:scale-95"> |
| 3 | <PlusIcon "color:#79c0ff">className="h-4 w-4" /> New project |
| 4 | </button> |
| 5 | |
| 6 | {/* trailing icon slides on hover */} |
| 7 | <button "color:#79c0ff">className="group flex items-center gap-2 rounded-xl border border-white/15 px-5 py-2.5 text-sm font-semibold text-white/85 transition hover:border-white/30 hover:bg-white/5"> |
| 8 | Continue |
| 9 | <ArrowIcon "color:#79c0ff">className="h-4 w-4 transition-transform group-hover:translate-x-1" /> |
| 10 | </button> |
| 11 | |
| 12 | {/* FAB — rotates on hover */} |
| 13 | <button "color:#79c0ff">className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-violet-600 to-indigo-600 text-white shadow-xl shadow-violet-500/40 transition-all hover:rotate-90 hover:scale-110 active:scale-95"> |
| 14 | <PlusIcon "color:#79c0ff">className="h-6 w-6" /> |
| 15 | </button> |
Segmented Control
A sliding-pill segmented control and a connected button group. Fully interactive — click the segments.
| 1 | function Segmented() { |
| 2 | const options = ["Day", "Week", "Month", "Year"]; |
| 3 | const [active, setActive] = useState("Week"); |
| 4 | |
| 5 | return ( |
| 6 | <div "color:#79c0ff">className="inline-flex rounded-full border border-white/10 bg-white/[0.05] p-1 backdrop-blur"> |
| 7 | {options.map((o) => ( |
| 8 | <button |
| 9 | "color:#79c0ff">key={o} |
| 10 | "color:#79c0ff">onClick={() => setActive(o)} |
| 11 | "color:#79c0ff">className={ |
| 12 | "rounded-full px-4 py-1.5 text-xs font-semibold transition-all duration-200 " + |
| 13 | (active === o |
| 14 | ? "bg-white text-slate-900 shadow" |
| 15 | : "text-white/55 hover:text-white") |
| 16 | } |
| 17 | > |
| 18 | {o} |
| 19 | </button> |
| 20 | ))} |
| 21 | </div> |
| 22 | ); |
| 23 | } |
Social Login Buttons
Dark-glass provider buttons for Google, GitHub, Apple and X — consistent height, real brand icons.
| 1 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-xl bg-white px-5 py-2.5 text-sm font-semibold text-slate-800 transition hover:bg-slate-100 active:scale-[0.99]"> |
| 2 | <GoogleIcon "color:#79c0ff">className="h-4.5 w-4.5" /> Continue with Google |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-xl border border-white/12 bg-white/[0.06] px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white/10 active:scale-[0.99]"> |
| 5 | <GitHubIcon "color:#79c0ff">className="h-4.5 w-4.5" /> Continue with GitHub |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-xl border border-white/12 bg-black px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-white/10 active:scale-[0.99]"> |
| 8 | <AppleIcon "color:#79c0ff">className="h-4.5 w-4.5" /> Continue with Apple |
| 9 | </button> |
Neon & 3D Push
Hard-shadow 3D push buttons that physically depress, plus neon outlines with inner glow.
| 1 | {/* 3D push — shadow collapses on press */} |
| 2 | <button |
| 3 | "color:#79c0ff">className="rounded-xl bg-violet-600 px-7 py-3 text-sm font-bold text-white transition-all hover:-translate-y-0.5 active:translate-y-1 active:shadow-none" |
| 4 | "color:#79c0ff">style={{ boxShadow: "0 6px 0 #4c1d95, 0 10px 20px rgba(124,58,237,0.35)" }} |
| 5 | > |
| 6 | 3D Push |
| 7 | </button> |
| 8 | |
| 9 | {/* neon outline */} |
| 10 | <button |
| 11 | "color:#79c0ff">className="rounded-xl border-2 border-cyan-400 px-7 py-3 text-sm font-bold text-cyan-300 transition-all hover:bg-cyan-400/10 active:scale-95" |
| 12 | "color:#79c0ff">style={{ boxShadow: "0 0 18px rgba(34,211,238,0.45), inset 0 0 14px rgba(34,211,238,0.08)" }} |
| 13 | > |
| 14 | Neon Cyan |
| 15 | </button> |
| 16 | |
| 17 | {/* retro hard shadow */} |
| 18 | <button "color:#79c0ff">className="rounded-lg border-2 border-white bg-yellow-300 px-6 py-2.5 text-sm font-black text-black shadow-[4px_4px_0_#fff] transition-all hover:shadow-[6px_6px_0_#fff] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-x-1 active:translate-y-1 active:shadow-none"> |
| 19 | BRUTALIST |
| 20 | </button> |
Hover Effects Collection
Slide-fill, border-draw, text-swap and expanding icon — hover each button to see its effect.
| 1 | {/* slide fill */} |
| 2 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-xl border border-violet-500/60 px-7 py-3 text-sm font-bold text-violet-300 transition-colors hover:text-white"> |
| 3 | <span "color:#79c0ff">className="absolute inset-0 -translate-x-full bg-gradient-to-r from-violet-600 to-indigo-600 transition-transform duration-300 group-hover:translate-x-0" /> |
| 4 | <span "color:#79c0ff">className="relative">Slide fill</span> |
| 5 | </button> |
| 6 | |
| 7 | {/* text swap */} |
| 8 | <button "color:#79c0ff">className="group relative h-11 w-36 overflow-hidden rounded-xl bg-white text-sm font-bold text-slate-900"> |
| 9 | <span "color:#79c0ff">className="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:-translate-y-full">Hover me</span> |
| 10 | <span "color:#79c0ff">className="absolute inset-0 flex translate-y-full items-center justify-center transition-transform duration-300 group-hover:translate-y-0">Let's go →</span> |
| 11 | </button> |
| 12 | |
| 13 | {/* icon reveal */} |
| 14 | <button "color:#79c0ff">className="group flex items-center rounded-xl bg-violet-600 py-3 pl-7 pr-5 text-sm font-bold text-white transition-all hover:bg-violet-500"> |
| 15 | Get started |
| 16 | <span "color:#79c0ff">className="w-0 overflow-hidden transition-all duration-300 group-hover:ml-2 group-hover:w-4">→</span> |
| 17 | </button> |