Navigation

Get Started

IntroductionInstallation

All Buttons

Double ShiftDelete Button3 D ConfettiAnimationMatrix ButtonNeon ButtonPlasma ButtonQuantum ButtonShadow ButtonShimmer ButtonTron ButtonPluse ButtonCosmic ButtonPluse Glow ButtonSurprising ButtonDonateNow ButtonShare Icon ButtonNoise Button3D ButtonGlass MorphismHexagoan ButtonMorph ButtonElectric ButtonPulse ButtonExpand ButtonSplit ButtonSquish ButtonScan ButtonCircuit BorderLaser BorderRadar ButtonDigital Frame Wave Button Liquid ButtonShockWaveRadial RippleFloating ButtonGradient Flow Solar GradientShift GradientPrism GradidentDancing TextReveal TextScramble TextText AnimationTypewritter EffectText GlitchIcon AnimationIcon MorphHover GlowingBackgroudFill Effect BackgroudSound Effect Pressable buttonMoving BorderHologram ButtonBounce ButtonTextAnimated ButtonCyber Button

Uplift UI Docs

3D Button

A visually striking 3D button with layered gradients, neon color variants, and interactive press/hover effects.

Demo

Interactive Demo

Press or hover to see the 3D effect and neon gradients.

Installation

Install the required dependencies to get started:

bash
Loading...

Usage

Import and use the ThreeDButton component in your app:

tsx
Loading...

Props

PropTypeDefaultDescription
childrenReact.ReactNode-Button content (text or elements).
classNamestring""Additional CSS classes for the button.
type"button" | "submit" | "reset""button"Button type attribute.
onClick(e: React.MouseEvent<HTMLButtonElement>) => voidundefinedClick handler for the button.
variant"neonBlue" | "electricPurple" | "auroraGreen" | "magentaGlow" | "hyperRed""neonBlue"Visual style variant for the button.

Features

  • 3D layered button effect with gradients and shadows
  • Multiple neon-inspired color variants
  • Press and hover animations
  • Customizable via className and variant
  • Accessible and keyboard-friendly
  • TypeScript support

Dependencies

Next.js 15+
Framer Motion
Tailwind CSS (recommended)
TypeScript (recommended)