ObsidianUIObsidianUI
DocumentationNeumorphism 3D Button

Neumorphism 3D Button

A stunning neumorphic button with realistic 3D depth, soft shadows, and tactile press feedback. Features smooth state transitions and works beautifully in both light and dark modes.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/neumorphism-3d-button.json"

Install Manually

1

Install dependencies

npm install clsx tailwind-merge
2

Copy the source code

Copy into components/ui/neumorphism-3d-button.tsx

"use client"
 
import React from "react"
import { cn } from "@/lib/utils"
 
interface Neumorphism3DButtonProps {
  children?: React.ReactNode
  onClick?: () => void
  disabled?: boolean
}
 
export const Neumorphism3DButton = ({ 
  children = "Click Me", 
  onClick, 
  disabled 
}: Neumorphism3DButtonProps) => {
  const [isActive, setIsActive] = React.useState(false)
 
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      onMouseDown={() => setIsActive(true)}
      onMouseUp={() => setIsActive(false)}
      onMouseLeave={() => setIsActive(false)}
      className={cn(
        "relative rounded-full cursor-pointer outline-none transition-all duration-300",
        "bg-neutral-200 dark:bg-neutral-900",
        // Neumorphic shadows...
      )}
    >
      {/* 3D depth layers */}
    </button>
  )
}

Note: The full implementation includes complex shadow layering for the 3D effect. Install via CLI for complete code.

Examples

With Click Handler

import { Neumorphism3DButton } from '@/components/ui/neumorphism-3d-button'
 
export function WithHandler() {
  return (
    <Neumorphism3DButton onClick={() => alert('Clicked!')}>
      Click Me
    </Neumorphism3DButton>
  )
}

Disabled State

import { Neumorphism3DButton } from '@/components/ui/neumorphism-3d-button'
 
export function Disabled() {
  return (
    <Neumorphism3DButton disabled>
      Disabled
    </Neumorphism3DButton>
  )
}

Props

Prop NameTypeDefaultDescription
childrenReact.ReactNodeClick MeButton content
onClick() => void-Click handler function
disabledbooleanfalseDisable button interactions

Features

  • Realistic 3D Depth: Multi-layer shadows create true depth
  • Tactile Feedback: Press animation mimics physical button
  • Neumorphic Design: Soft, extruded appearance
  • Dark Mode: Adapts shadows for dark backgrounds
  • Smooth Transitions: All state changes are animated
  • Accessible: Supports disabled state and click handlers
Masonry GridOTP Input