Home
Nick Girga
Material 3 Buttons [Light]

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 CSS v3.

963

<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

Animated button with rotating light beam
light beam rotates around the border

Author:
Anonymous

1 year ago

3.2k
neon-button-purple

Author:
Mohammad Rashel

2 months ago

255
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

25.6k
Elegant Buttons
Useful Tailwind classes for creating several types of basic buttons.

Author:
Nick Girga

9 months ago

863
hero modern
hero modern

Author:
Omer fils ELENGA

1 month ago

71
File Input
File Input

Author:
Aman kumar

1 year ago

2.6k
scroll to top buton with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

1 year ago

2.3k
buttons group
some attractive button group on different varients primary, outlined and link button

Author:
Akram Khan

1 year ago

1.8k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Author:
Nishant Trivedi

2 years ago

21.5k
Sign in with boogle button

Author:
Conan Hilton

3 years ago

10.5k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

1 year ago

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

Author:
Md. Tofayel islam

1 year ago

4.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components