Home
TailwindFlex
Button group

Button group

Add active class to clicked button using JavaScript

This tailwind example is contributed by TailwindFlex, on 24-Sep-2022. Component is made with Tailwind CSS v3. It is responsive.

Button Toggle switch

Author TailwindFlex

10.5k

Fork Fullscreen

<div class="flex justify-center m-r-auto bg-violet-600" id="buttons_container">
    <button class="text-gray-200 px-6 py-2 text-xl font-mono border-r-2 hover:text-slate-50"
        onclick="toggle(0)">
        sm
    </button>
    <button class="text-gray-200 px-6 py-2 text-xl font-mono border-r-2 hover:text-slate-50"
        onclick="toggle(1)">
        md
    </button>
    <button class="text-gray-200 px-6 py-2 text-xl font-mono border-r-2 hover:text-slate-50"
        onclick="toggle(2)">
        lg
    </button>
    <button class="text-gray-200 px-6 py-2 text-xl font-mono hover:text-slate-50"
        onclick="toggle(3)">
        xl
    </button>
</div>
<script>
    function toggle(index) {
        var buttons = document.getElementById('buttons_container').children;
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].classList.remove('text-white');
            buttons[i].classList.remove('underline');
        }
        buttons[index].classList.add('text-white');
        buttons[index].classList.add('underline');
    }
</script>

Related Examples

Animated toggle switch

Author:
Samuel Dawson

2 years ago

15.7k
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

20.8k
Switch tabs button

Author:
gmer33

2 years ago

16k
Hamburger menu button with open/close animation
Open and close animation onclick requires alpineJs

Author:
Krishna Gudpalle

3 years ago

19.7k
Toggle Switch
Toggle switch for dark mode

Author:
Charlotte Dupont

2 years ago

16.8k
Interactive Toggle Switch with Smooth Animation
A stylish toggle switch component built with Tailwind CSS and enhanced with minimal JavaScript. This toggle switch features smooth color transitions, dynamic text ("ON/OFF"), and a moving indicator ball, providing a visually appealing and functional design. Ideal for modern web interfaces where toggling functionality is required. Easily customizable for various use cases.

Author:
SHARIFUL ISLAM

9 months ago

1.6k
Disabled Button & Active Button

Author:
Dipti narayan

2 years ago

37.3k
Ripple Button
Ripple Button is an interactive button component with a ripple animation that responds to user clicks

Author:
Anonymous

2 years ago

13k
Beautiful animated button
on hover effect

Author:
Dika Rahman

1 year ago

4.9k
Button with loading

Author:
Prem..

3 years ago

19.3k
Google login/signup button
Styled button designed for users to log in or authenticate using their Google account. The button features a Google logo (represented by an SVG image) on the left and the text "Login with Google" on the right.

Author:
Shakti

2 years ago

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

Author:
András Szehofner

9 months ago

973

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components