Minimal Button

buttons

Clean, subtle button with smooth dynamic focus ring and modern press feedback.

#button#minimal#clean#interactive

Live Interactive Preview

Component Source Code

Select language in the dropdown

MinimalButton.tsx

1'use client';
2
3import React, { useState } from 'react';
4import { ArrowRight } from 'lucide-react';
5
6export default function MinimalButton() {
7  const [clicked, setClicked] = useState(false);
8
9  return (
10    <button
11      onClick={() => {
12        setClicked(true);
13        setTimeout(() => setClicked(false), 300);
14      }}
15      className={`group relative inline-flex items-center gap-2 rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900 px-5 sm:px-6 py-2.5 sm:py-3 text-sm font-semibold text-slate-900 dark:text-slate-100 shadow-sm transition-all duration-200 hover:border-slate-400 dark:hover:border-slate-500 hover:bg-slate-50 dark:hover:bg-slate-850 hover:shadow active:scale-95 ${
16        clicked ? 'ring-2 ring-blue-500/40' : ''
17      }`}
18    >
19      <span>Get Started</span>
20      <ArrowRight className="h-4 w-4 transition-transform duration-200 group-hover:translate-x-1" />
21    </button>
22  );
23}

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

Step 4: Usage Example

ExamplePage.tsx

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