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.

910

<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

Get it on Google Play button dark

Author:
Simon Scheffer

3 years ago

12.7k
Get the app section
Play store and App store buttons

Author:
Sophia Baker

3 years ago

9.6k
Animated Button
on hover show icon

Author:
Lautaro Gómez

1 year ago

2.5k
Button group
nice and simple buttons with a hover effect

Author:
Sophia Baker

3 years ago

8.1k
Animated Gradient Button Component
Button component with smooth hover effects and glass-morphism design. Features expanding gradient animation, rotating icon, and responsive layout. Perfect for call-to-action buttons, landing pages, and web applications. Easy copy-paste Tailwind CSS code ready for integration.

Author:
Homayoun

4 months ago

705
Button
Material Button

Author:
Akram Khan

1 year ago

2.3k
Color Changing Gradient Button
Color Changing Gradient Button

Author:
EquinoX

1 year ago

3.5k
Exapnd and collapse button for large content
Truncate and expand on click large content with javascript. uses line clamp.

Author:
Komal Jain

1 year ago

2.5k
Flame Button

Author:
Carlos Adrian Garcia

1 year ago

2.7k
Button
Button When Hover and page Reload then Button text will show the animation

Author:
Chitranshu

1 year ago

2.6k
Call to action buttons
Pair of active primary and secondary buttons. Elevated buttons w/ border bottom

Author:
Hyun-woo Cho

2 years ago

9.6k
Button with loading

Author:
Prem..

3 years ago

19.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components