Every button style imaginable — gradient, neon, glass, 3D, animated, icon, and group variants.
Gradient Buttons
Six gradient color pairs with scale-up hover and colored drop shadows.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-3"> |
| 2 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-violet-500/30 transition-transform duration-200 hover:scale-105"> |
| 3 | Violet → Indigo |
| 4 | </button> |
| 5 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-rose-500/30 transition-transform duration-200 hover:scale-105"> |
| 6 | Pink → Rose |
| 7 | </button> |
| 8 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-blue-500/30 transition-transform duration-200 hover:scale-105"> |
| 9 | Cyan → Blue |
| 10 | </button> |
| 11 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-teal-500/30 transition-transform duration-200 hover:scale-105"> |
| 12 | Emerald → Teal |
| 13 | </button> |
| 14 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-amber-500 to-orange-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-orange-500/30 transition-transform duration-200 hover:scale-105"> |
| 15 | Amber → Orange |
| 16 | </button> |
| 17 | <button "color:#79c0ff">className="rounded-lg bg-gradient-to-r from-red-500 to-pink-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-pink-500/30 transition-transform duration-200 hover:scale-105"> |
| 18 | Red → Pink |
| 19 | </button> |
| 20 | </div> |
Shine Effect Buttons
Gradient buttons with a shimmer sweep animation on hover using a pseudo-element.
| 1 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-lg bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-violet-500/30 before:absolute before:inset-y-0 before:-translate-x-full before:w-1/3 before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-700 hover:before:translate-x-[400%]"> |
| 2 | Shimmer |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-lg bg-gradient-to-r from-pink-500 to-rose-500 px-5 py-2.5 text-sm font-semibold text-white shadow-xl shadow-rose-500/30 before:absolute before:inset-y-0 before:-translate-x-full before:w-1/3 before:skew-x-12 before:bg-white/20 before:transition-transform before:duration-700 hover:before:translate-x-[400%]"> |
| 5 | Shine Effect |
| 6 | </button> |
Gradient Border Buttons
Gradient wrapper with dark inner button creating a colorful border effect.
| 1 | <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-indigo-500 p-[2px]"> |
| 2 | <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-slate-900"> |
| 3 | Violet Border |
| 4 | </button> |
| 5 | </div> |
| 6 | <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-pink-500 to-rose-500 p-[2px]"> |
| 7 | <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-slate-900"> |
| 8 | Rose Border |
| 9 | </button> |
| 10 | </div> |
| 11 | <div "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-cyan-400 to-blue-500 p-[2px]"> |
| 12 | <button "color:#79c0ff">className="rounded-[10px] bg-slate-950 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-slate-900"> |
| 13 | Cyan Border |
| 14 | </button> |
| 15 | </div> |
Outlined Buttons
Clean border-only buttons that fill with color on hover.
| 1 | <button "color:#79c0ff">className="rounded-lg border border-violet-500 px-5 py-2.5 text-sm font-semibold text-violet-400 transition-all duration-200 hover:bg-violet-500 hover:text-white"> |
| 2 | Violet |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="rounded-lg border border-white/40 px-5 py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:bg-white hover:text-slate-900"> |
| 5 | White |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="rounded-lg border border-emerald-500 px-5 py-2.5 text-sm font-semibold text-emerald-400 transition-all duration-200 hover:bg-emerald-500 hover:text-white"> |
| 8 | Emerald |
| 9 | </button> |
| 10 | <button "color:#79c0ff">className="rounded-lg border border-rose-500 px-5 py-2.5 text-sm font-semibold text-rose-400 transition-all duration-200 hover:bg-rose-500 hover:text-white"> |
| 11 | Rose |
| 12 | </button> |
Ghost Buttons
Ultra-subtle translucent buttons with soft borders that reveal on hover.
| 1 | <button "color:#79c0ff">className="rounded-lg border border-white/10 px-5 py-2.5 text-sm font-semibold text-white/60 transition-all duration-200 hover:border-white/30 hover:bg-white/5 hover:text-white"> |
| 2 | Ghost Default |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="rounded-lg border border-violet-500/20 px-5 py-2.5 text-sm font-semibold text-violet-400/60 transition-all duration-200 hover:border-violet-500/40 hover:bg-violet-500/10 hover:text-violet-300"> |
| 5 | Ghost Violet |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="rounded-lg border border-cyan-500/20 px-5 py-2.5 text-sm font-semibold text-cyan-400/60 transition-all duration-200 hover:border-cyan-500/40 hover:bg-cyan-500/10 hover:text-cyan-300"> |
| 8 | Ghost Cyan |
| 9 | </button> |
Pill Outlined Buttons
Rounded-full outlined buttons with optional dot status indicators.
| 1 | <button "color:#79c0ff">className="rounded-full border border-violet-500 px-6 py-2.5 text-sm font-semibold text-violet-400 transition-all duration-200 hover:bg-violet-500 hover:text-white"> |
| 2 | Pill Default |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-full border border-emerald-500 px-6 py-2.5 text-sm font-semibold text-emerald-400 transition-all duration-200 hover:bg-emerald-500 hover:text-white"> |
| 5 | <span "color:#79c0ff">className="h-2 w-2 rounded-full bg-emerald-400" /> |
| 6 | Online |
| 7 | </button> |
| 8 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-full border border-rose-500 px-6 py-2.5 text-sm font-semibold text-rose-400 transition-all duration-200 hover:bg-rose-500 hover:text-white"> |
| 9 | <span "color:#79c0ff">className="h-2 w-2 rounded-full bg-rose-400" /> |
| 10 | Alert |
| 11 | </button> |
Icon + Text Buttons
Gradient buttons with SVG icons on the left for Arrow, Download, Upload, Star, Heart, Share.
| 1 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30 transition-transform duration-200 hover:scale-105"> |
| 2 | <svg "color:#79c0ff">className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 3 | <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /> |
| 4 | </svg> |
| 5 | Get Started |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-blue-500/30 transition-transform duration-200 hover:scale-105"> |
| 8 | <svg "color:#79c0ff">className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 9 | <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> |
| 10 | </svg> |
| 11 | Download |
| 12 | </button> |
Icon-Only Buttons
Circular and square icon buttons in small, medium, and large sizes — gradient, outlined, and ghost variants.
| 1 | {/* Small square */} |
| 2 | <button "color:#79c0ff">className="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-violet-500 to-indigo-500 shadow-lg shadow-violet-500/30 transition-transform hover:scale-110"> |
| 3 | <svg "color:#79c0ff">className="h-3.5 w-3.5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}> |
| 4 | <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" /> |
| 5 | </svg> |
| 6 | </button> |
| 7 | {/* Medium circle */} |
| 8 | <button "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 shadow-lg shadow-teal-500/30 transition-transform hover:scale-110"> |
| 9 | <svg "color:#79c0ff">className="h-4 w-4 text-white" .../> |
| 10 | </button> |
| 11 | {/* Outlined square */} |
| 12 | <button "color:#79c0ff">className="flex h-10 w-10 items-center justify-center rounded-xl border border-violet-500 text-violet-400 transition-all hover:bg-violet-500 hover:text-white"> |
| 13 | <svg "color:#79c0ff">className="h-4 w-4" .../> |
| 14 | </button> |
Trailing Icon Buttons
Buttons with right-side icons that slide rightward on hover.
| 1 | <button "color:#79c0ff">className="group flex items-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/30"> |
| 2 | Explore |
| 3 | <svg "color:#79c0ff">className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 4 | <path strokeLinecap="round" strokeLinejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" /> |
| 5 | </svg> |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="group flex items-center gap-2 rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-blue-500/30"> |
| 8 | Download |
| 9 | <svg "color:#79c0ff">className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 10 | <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> |
| 11 | </svg> |
| 12 | </button> |
Loading State Buttons
Disabled buttons with inline spinner showing processing state in three color variants.
| 1 | <button disabled "color:#79c0ff">className="flex cursor-not-allowed items-center gap-2 rounded-lg bg-gradient-to-r from-violet-500 to-indigo-500 px-5 py-2.5 text-sm font-semibold text-white opacity-80 shadow-lg shadow-violet-500/20"> |
| 2 | <span "color:#79c0ff">className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" /> |
| 3 | Processing... |
| 4 | </button> |
| 5 | <button disabled "color:#79c0ff">className="flex cursor-not-allowed items-center gap-2 rounded-lg bg-gradient-to-r from-emerald-500 to-teal-500 px-5 py-2.5 text-sm font-semibold text-white opacity-80"> |
| 6 | <span "color:#79c0ff">className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" /> |
| 7 | Saving... |
| 8 | </button> |
Progress Buttons
Buttons with an internal progress bar overlay showing percentage completion.
| 1 | <button disabled "color:#79c0ff">className="relative overflow-hidden rounded-lg bg-gradient-to-r from-violet-500 to-indigo-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg before:absolute before:inset-y-0 before:left-0 before:w-[60%] before:bg-white/20 before:transition-all"> |
| 2 | <span "color:#79c0ff">className="relative z-10">Uploading 60%...</span> |
| 3 | </button> |
| 4 | <button disabled "color:#79c0ff">className="relative overflow-hidden rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg before:absolute before:inset-y-0 before:left-0 before:w-[30%] before:bg-white/20 before:transition-all"> |
| 5 | <span "color:#79c0ff">className="relative z-10">Downloading 30%...</span> |
| 6 | </button> |
| 7 | <button disabled "color:#79c0ff">className="relative overflow-hidden rounded-lg bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg before:absolute before:inset-y-0 before:left-0 before:w-[85%] before:bg-white/20 before:transition-all"> |
| 8 | <span "color:#79c0ff">className="relative z-10">Installing 85%...</span> |
| 9 | </button> |
Hero CTA Buttons
Large primary + secondary button pairs with optional badge labels for landing pages.
| 1 | <div "color:#79c0ff">className="flex flex-wrap items-center gap-4"> |
| 2 | <div "color:#79c0ff">className="flex flex-col items-start gap-1"> |
| 3 | <span "color:#79c0ff">className="inline-block rounded-full bg-violet-500/20 px-3 py-0.5 text-[10px] font-bold uppercase tracking-widest text-violet-400"> |
| 4 | New Feature |
| 5 | </span> |
| 6 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-r from-violet-500 to-indigo-500 px-8 py-3.5 text-base font-bold text-white shadow-2xl shadow-violet-500/40 transition-transform duration-200 hover:scale-105"> |
| 7 | Start Building Free |
| 8 | </button> |
| 9 | </div> |
| 10 | <button "color:#79c0ff">className="rounded-xl border border-white/20 px-8 py-3.5 text-base font-semibold text-white/80 transition-all hover:border-white/40 hover:bg-white/5 hover:text-white"> |
| 11 | View Demo |
| 12 | </button> |
| 13 | </div> |
Full-Width CTA Buttons
w-full centered buttons with icons, ideal for pricing cards and landing sections.
| 1 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-xl bg-gradient-to-r from-violet-500 to-indigo-500 py-4 text-base font-bold text-white shadow-xl shadow-violet-500/30 transition-transform hover:scale-[1.02]"> |
| 2 | <svg "color:#79c0ff">className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}> |
| 3 | <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" /> |
| 4 | </svg> |
| 5 | Get Started — It's Free |
| 6 | </button> |
| 7 | <button "color:#79c0ff">className="flex w-full items-center justify-center gap-3 rounded-xl border border-violet-500/50 py-4 text-base font-semibold text-violet-400 transition-all hover:bg-violet-500/10"> |
| 8 | View Documentation |
| 9 | </button> |
Social Sign-In Buttons
Accurately branded sign-in buttons for Google, GitHub, X, and Facebook.
| 1 | <button "color:#79c0ff">className="flex w-full items-center gap-3 rounded-lg bg-white px-5 py-3 text-sm font-semibold text-slate-800 shadow-md transition-shadow hover:shadow-lg"> |
| 2 | {/* Google SVG */} |
| 3 | Continue with Google |
| 4 | </button> |
| 5 | <button "color:#79c0ff">className="flex w-full items-center gap-3 rounded-lg bg-[#24292e] px-5 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#2f363d]"> |
| 6 | {/* GitHub SVG */} |
| 7 | Continue with GitHub |
| 8 | </button> |
| 9 | <button "color:#79c0ff">className="flex w-full items-center gap-3 rounded-lg bg-black px-5 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-slate-900"> |
| 10 | {/* X SVG */} |
| 11 | Continue with X |
| 12 | </button> |
| 13 | <button "color:#79c0ff">className="flex w-full items-center gap-3 rounded-lg bg-[#1877F2] px-5 py-3 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#166FE5]"> |
| 14 | {/* Facebook SVG */} |
| 15 | Continue with Facebook |
| 16 | </button> |
Share Buttons
Share buttons for X, LinkedIn, WhatsApp, and Copy Link with brand-accurate colors.
| 1 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-black px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition-all hover:bg-slate-800"> |
| 2 | {/* X icon */} |
| 3 | Share on X |
| 4 | </button> |
| 5 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-[#0A66C2] px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition-all hover:bg-[#0958A8]"> |
| 6 | {/* LinkedIn icon */} |
| 7 | Share on LinkedIn |
| 8 | </button> |
| 9 | <button "color:#79c0ff">className="flex items-center gap-2 rounded-lg bg-[#25D366] px-5 py-2.5 text-sm font-semibold text-white shadow-lg transition-all hover:bg-[#20BA5A]"> |
| 10 | {/* WhatsApp icon */} |
| 11 | |
| 12 | </button> |
Pulse Ring Buttons
Buttons with an animate-ping outer ring in violet, pink, emerald, and amber.
| 1 | <div "color:#79c0ff">className="relative"> |
| 2 | <span "color:#79c0ff">className="absolute -inset-1 animate-ping rounded-full bg-violet-500 opacity-40" /> |
| 3 | <button "color:#79c0ff">className="relative rounded-full bg-gradient-to-r from-violet-500 to-indigo-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-violet-500/40"> |
| 4 | Live Updates |
| 5 | </button> |
| 6 | </div> |
| 7 | <div "color:#79c0ff">className="relative"> |
| 8 | <span "color:#79c0ff">className="absolute -inset-1 animate-ping rounded-full bg-emerald-500 opacity-40" /> |
| 9 | <button "color:#79c0ff">className="relative rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-teal-500/40"> |
| 10 | Online Now |
| 11 | </button> |
| 12 | </div> |
Slide Fill Buttons
Background slides in from left on hover via a pseudo-element transform.
| 1 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-lg border border-violet-500/50 px-6 py-2.5 text-sm font-semibold text-white before:absolute before:inset-0 before:-translate-x-full before:bg-violet-600 before:transition-transform before:duration-500 hover:before:translate-x-0"> |
| 2 | <span "color:#79c0ff">className="relative z-10">Slide Fill</span> |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-lg border border-cyan-500/50 px-6 py-2.5 text-sm font-semibold text-white before:absolute before:inset-0 before:-translate-x-full before:bg-cyan-600 before:transition-transform before:duration-500 hover:before:translate-x-0"> |
| 5 | <span "color:#79c0ff">className="relative z-10">Slide Cyan</span> |
| 6 | </button> |
Ripple Effect Buttons
Buttons with an expanding ripple animation on click, simulating a material-design touch feedback.
| 1 | <div "color:#79c0ff">className="flex flex-wrap gap-4"> |
| 2 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-2xl bg-gradient-to-r from-violet-600 to-indigo-600 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-violet-500/30 transition-all hover:shadow-xl hover:shadow-violet-500/40 active:scale-95"> |
| 3 | <span "color:#79c0ff">className="absolute inset-0 flex items-center justify-center"> |
| 4 | <span "color:#79c0ff">className="h-0 w-0 rounded-full bg-white/30 transition-all duration-500 group-active:h-32 group-active:w-32 group-active:opacity-0" /> |
| 5 | </span> |
| 6 | <span "color:#79c0ff">className="relative">Click Ripple</span> |
| 7 | </button> |
| 8 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-2xl border-2 border-emerald-500 bg-transparent px-7 py-3 text-sm font-bold text-emerald-400 transition-all hover:bg-emerald-500/10 active:scale-95"> |
| 9 | <span "color:#79c0ff">className="absolute inset-0 flex items-center justify-center"> |
| 10 | <span "color:#79c0ff">className="h-0 w-0 rounded-full bg-emerald-400/20 transition-all duration-500 group-active:h-32 group-active:w-32 group-active:opacity-0" /> |
| 11 | </span> |
| 12 | <span "color:#79c0ff">className="relative">Outlined</span> |
| 13 | </button> |
| 14 | <button "color:#79c0ff">className="group relative overflow-hidden rounded-full bg-rose-500 px-7 py-3 text-sm font-bold text-white shadow-lg shadow-rose-500/30 transition-all hover:bg-rose-400 active:scale-95"> |
| 15 | <span "color:#79c0ff">className="absolute inset-0 flex items-center justify-center"> |
| 16 | <span "color:#79c0ff">className="h-0 w-0 rounded-full bg-white/30 transition-all duration-500 group-active:h-32 group-active:w-32 group-active:opacity-0" /> |
| 17 | </span> |
| 18 | <span "color:#79c0ff">className="relative">Pill Ripple</span> |
| 19 | </button> |
| 20 | </div> |
Download Bounce
Download button with a bouncing arrow animation on hover
| 1 | <button "color:#79c0ff">className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm text-white" |
| 2 | "color:#79c0ff">style={{ background: "linear-gradient(135deg,#6366f1,#8b5cf6)" }} |
| 3 | "color:#79c0ff">onMouseEnter={e => e.currentTarget.querySelector('.ico').style.animation='bounce-down 0.6s ease infinite'} |
| 4 | "color:#79c0ff">onMouseLeave={e => e.currentTarget.querySelector('.ico').style.animation='none'}> |
| 5 | <svg "color:#79c0ff">className="ico w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"> |
| 6 | <path d="M12 3v12m0 0l-4-4m4 4l4-4M3 20h18"/> |
| 7 | </svg> |
| 8 | Download |
| 9 | </button> |
Rocket & Arrow CTA
High-impact CTA buttons with launch and directional animations
| 1 | <button "color:#79c0ff">className="ico-rkt flex items-center gap-2 px-6 py-3 rounded-xl font-bold text-sm text-white" |
| 2 | "color:#79c0ff">style={{ background: "linear-gradient(135deg,#f97316,#ef4444)" }}> |
| 3 | <svg "color:#79c0ff">className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"> |
| 4 | <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2l7-7-5-5-5 7zM19 3s0 4-4 8l-3 3 2 1 4-4c4-4 4-8 4-8h-3z"/> |
| 5 | </svg> |
| 6 | Launch Now |
| 7 | </button> |
Animated Social CTAs
WhatsApp, share, copy and live ping social CTA buttons with micro-animations
| 1 | <button "color:#79c0ff">className="ico-wa flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm text-white" |
| 2 | "color:#79c0ff">style={{ background: "linear-gradient(135deg,#25d366,#128c7e)" }}> |
| 3 | <svg "color:#79c0ff">className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"> |
| 4 | <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/> |
| 5 | <path d="M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.48-8.45z"/> |
| 6 | </svg> |
| 7 | |
| 8 | </button> |
Color-Category Icon Pack
Category-themed colored icon buttons — finance, health, travel, food, education, music
| 1 | <button "color:#79c0ff">className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm text-white" |
| 2 | "color:#79c0ff">style={{ background: "linear-gradient(135deg,#10b981,#0d9488)" }}> |
| 3 | <svg "color:#79c0ff">className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93V18h-2v1.93C7.06 19.44 4.56 16.94 4.07 14H6v-2H4.07C4.56 9.06 7.06 6.56 10 6.07V8h2V6.07c2.94.49 5.44 2.99 5.93 5.93H16v2h1.93c-.49 2.94-2.99 5.44-5.93 5.93z"/></svg> |
| 4 | Finance |
| 5 | </button> |
Glow Pulse Icon Buttons
Neon glow pulsing animated icon buttons — perfect for dark UI dashboards
| 1 | <button "color:#79c0ff">style={{ background:"linear-gradient(135deg,#6366f1,#8b5cf6)", boxShadow:"0 0 20px rgba(99,102,241,0.5)", animation:"glow-pulse 2s ease-in-out infinite" }} |
| 2 | "color:#79c0ff">className="flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm text-white"> |
| 3 | <svg "color:#79c0ff">className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"> |
| 4 | <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/> |
| 5 | </svg> |
| 6 | Go Pro |
| 7 | </button> |
Outlined Icon CTAs
Elegant outlined icon buttons with fill-on-hover and stroke animations
| 1 | <button "color:#79c0ff">className="group flex items-center gap-2 px-5 py-2.5 rounded-xl font-semibold text-sm transition-all duration-300" |
| 2 | "color:#79c0ff">style={{ border:"1px solid rgba(99,102,241,0.5)", color:"#a5b4fc" }} |
| 3 | "color:#79c0ff">onMouseEnter={e=>{e.currentTarget.style.background="rgba(99,102,241,0.15)";e.currentTarget.style.borderColor="rgba(99,102,241,0.9)"}} |
| 4 | "color:#79c0ff">onMouseLeave={e=>{e.currentTarget.style.background="transparent";e.currentTarget.style.borderColor="rgba(99,102,241,0.5)"}}> |
| 5 | <svg "color:#79c0ff">className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 3v12m0 0l-4-4m4 4l4-4M3 20h18"/></svg> |
| 6 | Download |
| 7 | </button> |