Material 3 Buttons [Light]

Buttons that conform to Google's Material 3 design guidelines

This tailwind example is contributed by Nick Girga, on 18-May-2025. Component is made with Tailwind v3.4.

Tailwind v3.4 1.8k 6

<h1 class="text-xl">Buttons</h1>
        <div class="flex flex-col items-center gap-2">

<div class="flex flex-row items-center gap-2">

<button class="btn btn-elevated">Elevated</button>

<button class="btn btn-elevated pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-elevated pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn">Filled</button>

<button class="btn pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn btn-tonal">Tonal</button>

<button class="btn btn-tonal pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-tonal pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn btn-outlined">Outlined</button>

<button class="btn btn-outlined pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-outlined pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<div class="flex flex-row items-center gap-2">

<button class="btn btn-ghost">Ghost</button>

<button class="btn btn-ghost pl-4">
                    <span class="material-symbols-outlined">add</span>
                    Icon
                </button>

<button class="btn btn-ghost pl-4" disabled>
                    <span class="material-symbols-outlined">add</span>
                    Disabled
                </button>

</div>

<h1 class="text-xl mt-4">Icon Buttons</h1>
        <div class="flex flex-row items-center gap-2">

<button class="btn btn-elevated p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn btn-tonal p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn btn-outlined p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

<button class="btn btn-ghost p-3">
                <span class="material-symbols-outlined">settings</span>
            </button>

</div>

<h1 class="text-xl mt-4">Floating Action Buttons</h1>
        <div class="flex flex-row items-center gap-2">

<button class="fab fab-large">
                <span class="material-symbols-outlined  !text-4xl">edit</span>
            </button>

<button class="fab">
                <span class="material-symbols-outlined">edit</span>
                Compose
            </button>

<button class="fab">
                <span class="material-symbols-outlined">edit</span>
            </button>

<button class="fab fab-small">
                <span class="material-symbols-outlined  !text-base">edit</span>
            </button>
            
        </div>

<h1 class="text-xl mt-4">Connected Toggle Buttons</h1>
        <div class="flex flex-row items-center gap-2">
            
            <div class="flex flex-row">
                <label class="toggle-button-label">
                    <input type="checkbox" class="peer toggle-button rounded-l-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 1
                </label>
                <label class="toggle-button-label">
                    <input type="checkbox" class="peer toggle-button" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 2
                </label>
                <label class="toggle-button-label">
                    <input type="checkbox" class="peer toggle-button rounded-r-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 3
                </label>
            </div>

</div>

<h1 class="text-xl mt-4">Connected Radio Buttons</h1>
        <div class="flex flex-row items-center gap-2">
            
            <div class="flex flex-row">
                <label class="toggle-button-label">
                    <input type="radio" name="radio-group-0" checked class="peer toggle-button rounded-l-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 1
                </label>
                <label class="toggle-button-label">
                    <input type="radio" name="radio-group-0" class="peer toggle-button" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 2
                </label>
                <label class="toggle-button-label">
                    <input type="radio" name="radio-group-0" class="peer toggle-button rounded-r-full" />
                    <span class="toggle-button-indicator material-symbols-outlined">check</span>
                    Option 3
                </label>
            </div>

</div>

</div>
</body>

Related Examples

Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Md. Tofayel islam

2 years ago

5k
Button
Button

Arjun Kumar

7 months ago

628
Corner‑Framed Hover Transition Buttons
Minimal CTA buttons featuring animated corner shapes and smooth width transitions on hover, built with Tailwind CSS for a sharp, modern UI.

Arshid Iqbal

3 months ago

23
Download on the Mac App Store dark button

Simon Scheffer

3 years ago

8.6k
Floating "Go to Top" Button with Tailwind CSS
🚀 Boost your website’s user experience with a sleek floating "Go to Top" button! This easy-to-implement solution uses Tailwind CSS for styling. ✔️ Smooth scroll to top ✔️ Clean and modern design ✔️ Responsive and animated effects Perfect for any website or portfolio! Add it today and make navigation effortless! 🔝💻

Abdul Baset Bappy

1 year ago

1.7k
future ai robot
this an ai template by salvator

Baraka Salvator

1 year ago

1.7k
neon-button-purple

Mohammad Rashel

11 months ago

758
Buy Me a Coffee CTA section

Sienna

3 years ago

10.5k
Button with hover effect
Button with light hover effect, responsive and suitable for light/dark mode.

isaSxm

1 year ago

898
Glowing gradient button
Button on black background

Leon Bachmann

3 years ago

41.2k
5 Different Style of Button
Gradient Button outline button neon button Sliding Background pulsing Button

KULDEEP

1 year ago

1.2k
Simple Btn animation

Ranit Saha

1 year ago

2.3k