React Button Components
Copy-paste React buttons with real character — glass, metal, neumorphic and 3D materials, magnetic hover, morphing icons and refraction effects. Built with Tailwind CSS, Framer Motion and GSAP, ready to drop into any Next.js app.
All 40 buttons components
- 3d Button — 3D push button with press/hover physics and 8 color variants: amber, emerald, rose, sky, violet, slate, coral, mint.
- Morph Button — A button that morphs its shape on hover using GSAP.
- Morph Image Button — A button that morphs an image mask on hover using GSAP.
- Shiny Button — A shiny button with hover effects.
- Mouse Follower Button — A button that follows the mouse cursor with hover effects.
- Border Gradient Button — A button with a gradient border effect.
- Premium Button — Neumorphic premium button with layered shadows and 8 color variants: neutral, dark, gold, mint, rose, sky, lavender, sand.
- Orange Premium Button — Glossy gradient button with soft glow and 8 color variants: orange, pink, emerald, violet, sky, ocean, gold, magenta.
- Blue Chrome Button — A chrome-style button with layered glow border and smooth motion.
- Stripe Button — A Stripe-inspired button with inset shadow effect.
- Learn More Button — An animated learn more button with hover effects using Framer Motion.
- Visit Button — A compact visit button with label and icon swap on hover.
- Toggle Button — An animated toggle switch with spring physics using Framer Motion.
- Abhinav Bento Button — A large bento-style button.
- Goe Button — A gooey SVG filter button effect using Framer Motion.
- Blur Toggle Button — A button with blur transition effect on toggle using Framer Motion.
- Matte Shadow Button — A dark matte button with layered depth shadow.
- Matte Dark Button — A matte dark button with #222 base and layered shadow depth.
- Metal Button — A metallic button with 8 metal variants: silver, chrome, gold, copper, bronze, titanium, rose-gold, gunmetal.
- Glass Button — A frosted glass button with gradient border and 10 color variants: blue, purple, emerald, rose, amber, cyan, lime, slate, red, indigo.
- Prism Glass Button — A thick domed glass button that refracts the content behind it via an feDisplacementMap lens, with a heavy chromatic-aberration fringe, frost and specular sheen. Draggable.
- Glass Square Button — A rounded-square frosted glass button with diagonal gradient border and 10 color variants: blue, purple, emerald, rose, amber, cyan, lime, slate, red, indigo.
- Glass Circle Button — A circular icon glass button with conic gradient ring and frosted core. 10 color variants and a swappable Lucide icon.
- Glass Icon Button — A frosted glass pill button with an embedded icon capsule. 10 color variants and a swappable Lucide icon.
- Cyber Button — A cyberpunk-style button with neon borders and glitch effects.
- Book Demo Button — Lime square with animated dotted chevron arrows that expands a dark panel on hover to reveal a label.
- Glassy Button — Chunky square glass/metal button with vertical gradient ring, layered floating shadow, and animated press state with icon dimming.
- Rainbow Glowing Button — Dark pill button with a rainbow glow that auto-cycles through 6 color variants (red, orange, yellow, green, blue, pink) using radial blur and gradient stroke.
- Bevel Button — Compact dark button with a top-light to bottom-dark gradient stroke and layered inset bevel shadows for a tactile chiseled feel.
- Liquid Button — Frosted-glass pill button with gradient ring and a hover slide that swaps two stacked text labels.
- Soft Pill Button — Frosted-glass pill button with layered highlights, gradient border, and primary/secondary variants.
- Framer Cta Button — Framer-style CTA pill button with brand icon and dark/light variants.
- Liquid Gradient Button — Premium gradient button with image overlay, loading animation, and 8 color variants: pink, cyan, emerald, amber, crimson, violet, ocean, sunset.
- Radial Gradient Button — Radial gradient button with inset glow and 8 color variants: blue, purple, emerald, crimson, amber, cyan, violet, rose.
- Pearl Toggle Button — Pearl Toggle Button component.
- Recessed Stepper Button — Recessed Stepper Button component.
- Squircle Counter Button — Squircle Counter Button component.
- Silver Button — Glossy silver pill button with a vertical white-to-gray gradient stroke and embossed letterpress text, in slim steel and chunky pearl variants.
- Antinomy Button — Text label that slides right on hover as two gooey pills bloom and merge behind an action word, in subtle and solid variants.
- Mitosis Button — Share pill that buds gooey drops from its underside on hover, which stretch, split apart and settle into a row of icon buttons.