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.

<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

Payment Button

Author:
Md. Tofayel islam

1 year ago

3.4k
Amazon shopping buy now button
Amazon shopping buy now button

Author:
OmKar Mehta

1 year ago

2.3k
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

10 months ago

1.1k
Tilted button on hover.
A simple button with a gradient and tilt on hover. Dark mode supported with same color.

Author:
Banshee

11 months ago

981
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! 🔝💻

Author:
Abdul Baset Bappy

11 months ago

897
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 year ago

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

Author:
Sophia Baker

3 years ago

9.7k
futuristic button

Author:
Crimson

1 year ago

1.1k
Border bottom button

Author:
Santos78

2 years ago

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

Author:
KULDEEP

8 months ago

535
E-Learning Course Card with Badge and Level Indicator
An HTML and Tailwind CSS component mockup for displaying course information. Features include a placeholder image area with an overlaid certificate badge, a distinct level indicator banner below the image, category text, a course title, key details (like duration and learner count placeholders), and primary/secondary action buttons. Designed for e-learning platforms or course listings.

Author:
Hamza Atig

10 months ago

1k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components