Home
Krishna Gudpalle
Hamburger menu button with open/close animation

Hamburger menu button with open/close animation

Open and close animation onclick
requires alpineJs

This tailwind example is contributed by Krishna Gudpalle, on 02-Aug-2022. Component is made with Tailwind CSS v3. It is responsive.

Button Menu

Author Krishna Gudpalle

18.6k

9

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div class="min-h-screen bg-gray-100 flex flex-col justify-center">
    <div class="relative py-3 sm:max-w-xl mx-auto">
        <nav x-data="{ open: false }">
            <button class="w-14 h-14 relative focus:outline-none bg-teal-600 rounded" @click="open = !open">
                <div class="block w-5 absolute left-6 top-1/2   transform  -translate-x-1/2 -translate-y-1/2">
                    <span  class="block absolute h-0.5 w-7 text-white bg-current transform transition duration-500 ease-in-out" :class="{'rotate-45': open,' -translate-y-1.5': !open }"></span>
                    <span  class="block absolute  h-0.5 w-5 text-white bg-current   transform transition duration-500 ease-in-out" :class="{'opacity-0': open } "></span>
                    <span  class="block absolute  h-0.5 w-7 text-white bg-current transform  transition duration-500 ease-in-out" :class="{'-rotate-45': open, ' translate-y-1.5': !open}"></span>
                </div>
            </button>
        </nav>
    </div>
</div>

Related Examples

Menu button

Author:
Freja Jensen

2 years ago

15.1k
Hamburger menu button with hover effect

Author:
_Amar_

2 years ago

16.9k
MobileMenu
Mobile Menu + AlpineJs

Author:
Maxim

1 year ago

4.5k
Confirm and cancel buttons

Author:
Samuel Dawson

2 years ago

15.4k
Switch tabs button

Author:
gmer33

2 years ago

15.1k
Floating buttons examples
Bottom-Right Corner, Bottom-Left Corner, Top-Left Corner, Top-Right Corner, Center, Bottom-Center

Author:
Livia Flores

2 years ago

23.9k
3D button with hover effect!

Author:
Laurits

2 years ago

17k
Back to top button

Author:
Rafferty Kim

2 years ago

14.1k
Tab Menu
Tab menu

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

5.5k
Border bottom button

Author:
Santos78

2 years ago

12k
Button group
Add active class to clicked button using JavaScript

Author:
TailwindFlex

2 years ago

10.3k
Button Dropdown
Drop down button with only tailwind css using focus

Author:
Shivam Vishwakarma

7 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1