3D Button

buttons

Tactile pressable 3D depth button with realistic physical movement on click.

#button#3d#tactile#depth

Live Interactive Preview

Component Source Code

Select language in the dropdown

ThreeDButton.tsx

1'use client';
2
3import React from 'react';
4
5export default function ThreeDButton() {
6  return (
7    <button className="relative inline-block text-sm font-bold active:translate-y-1 transition-all">
8      <span className="absolute inset-0 rounded-xl bg-blue-800 dark:bg-blue-900" />
9      <span className="relative block rounded-xl border border-blue-400 bg-blue-600 px-6 sm:px-7 py-2.5 sm:py-3 text-white transition-transform -translate-y-1 active:translate-y-0 shadow-md">
10        Press 3D Depth
11      </span>
12    </button>
13  );
14}

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/ThreeDButton.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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