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

15.8k

7

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

1 year ago

11.8k
Hamburger menu button with hover effect

Author:
_Amar_

1 year ago

14.4k
MobileMenu
Mobile Menu + AlpineJs

Author:
Maxim Alex

7 months ago

2.7k
Confirm and cancel buttons

Author:
Samuel Dawson

1 year ago

13k
Switch tabs button

Author:
gmer33

1 year ago

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

Author:
Livia Flores

1 year ago

18.4k
3D button with hover effect!

Author:
Laurits

1 year ago

12.3k
Back to top button

Author:
Rafferty Kim

1 year ago

12.3k
Tab Menu
Tab menu

Author:
Samuel Abera

5 months ago

2.5k
Border bottom button

Author:
Santos78

1 year ago

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

Author:
TailwindFlex

1 year ago

8.9k
Disabled Button & Active Button

Author:
Dipti narayan

1 year ago

26.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1600+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8