Retro Brutal Button

buttons

Bold neo-brutalist button with guaranteed hard drop-shadow and tactile click displacement.

#button#retro#brutalist#bold

Live Interactive Preview

Component Source Code

Select language in the dropdown

RetroButton.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { ArrowUpRight, Copy } from 'lucide-react';
5
6export default function RetroButton() {
7  const [clicked, setClicked] = useState(false);
8
9  return (
10    <button
11      onClick={() => {
12        setClicked(true);
13        setTimeout(() => setClicked(false), 200);
14      }}
15      style={{
16        boxShadow: clicked ? '0px 0px 0px 0px #0f172a' : '5px 5px 0px 0px #0f172a',
17        transform: clicked ? 'translate(4px, 4px)' : 'translate(0px, 0px)',
18        transition: 'all 0.15s ease'
19      }}
20      onMouseEnter={(e) => {
21        if (!clicked) {
22          e.currentTarget.style.transform = 'translate(-2px, -2px)';
23          e.currentTarget.style.boxShadow = '7px 7px 0px 0px #0f172a';
24        }
25      }}
26      onMouseLeave={(e) => {
27        if (!clicked) {
28          e.currentTarget.style.transform = 'translate(0px, 0px)';
29          e.currentTarget.style.boxShadow = '5px 5px 0px 0px #0f172a';
30        }
31      }}
32      className="flex items-center gap-2 rounded-none border-2 border-slate-900 bg-amber-400 px-6 py-3 text-sm font-black uppercase tracking-wider text-slate-950 cursor-pointer select-none"
33    >
34      <Copy className="h-4 w-4" />
35      <span>Retro Brutal</span>
36      <ArrowUpRight className="h-4 w-4" />
37    </button>
38  );
39}

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

Step 4: Usage Example

ExamplePage.tsx

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