Neumorphic Button

buttons

Soft tactile neumorphic button with guaranteed shadow casting and press reactions.

#button#neumorphic#soft#tactile

Live Interactive Preview

Component Source Code

Select language in the dropdown

NeumorphicButton.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { Mail, ArrowRight } from 'lucide-react';
5
6export default function NeumorphicButton() {
7  const [pressed, setPressed] = useState(false);
8
9  return (
10    <button
11      onMouseDown={() => setPressed(true)}
12      onMouseUp={() => setPressed(false)}
13      onMouseLeave={() => setPressed(false)}
14      onTouchStart={() => setPressed(true)}
15      onTouchEnd={() => setPressed(false)}
16      style={{
17        boxShadow: pressed
18          ? 'inset 3px 3px 6px rgba(0,0,0,0.18), inset -3px -3px 6px rgba(255,255,255,0.9)'
19          : '6px 6px 14px rgba(0,0,0,0.12), -6px -6px 14px rgba(255,255,255,0.9)',
20        transform: pressed ? 'scale(0.97)' : 'scale(1)',
21        transition: 'all 0.15s ease'
22      }}
23      className="flex items-center gap-2 rounded-2xl border border-slate-200/80 bg-slate-100 dark:bg-slate-800 dark:border-slate-700 px-6 py-3 text-sm font-semibold text-slate-800 dark:text-slate-100 cursor-pointer select-none"
24    >
25      <Mail className="h-4 w-4 text-blue-600 dark:text-blue-400" />
26      <span>Soft Softbox</span>
27      <ArrowRight className="h-3.5 w-3.5" />
28    </button>
29  );
30}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/buttons/NeumorphicButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import NeumorphicButton from '@/components/buttons/NeumorphicButton';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <NeumorphicButton />
7    </main>
8  );
9}