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.

This tailwind example is contributed by SHARIFUL ISLAM, on 05-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Button Toggle switch

Author SHARIFUL ISLAM

Tailwind v3.4 2.4k 3

Fork Fullscreen

if (input.checked) {
      label.classList.add("bg-[#0E947A]");
      label.classList.remove("bg-[#E6E6E6]");
      text.textContent = "ON";
      text.classList.remove("text-black", "text-right", "pr-1.5");
      text.classList.add("text-white", "text-left", "pl-2");
      ball.style.transform = "translateX(36px)";
    } else {
      label.classList.add("bg-[#E6E6E6]");
      label.classList.remove("bg-[#0E947A]");
      text.textContent = "OFF";
      text.classList.remove("text-white", "text-left", "pl-2");
      text.classList.add("text-black", "text-right", "pr-1.5");
      ball.style.transform = "translateX(4px)";
    }
  }
</script>

Related Examples

Button group
Add active class to clicked button using JavaScript

TailwindFlex

4 years ago

11k
Switch tabs button

gmer33

3 years ago

17.2k
Dark mode toggle button
Switch to dark mode without any hassle with this simple JavaScript hack. Sun night button

Nishant Trivedi

3 years ago

22.2k
Button
Button

Arjun Kumar

5 months ago

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

KULDEEP

1 year ago

1.1k
Boutons iOS 26
Boutons iOS 26

Omer fils ELENGA

10 months ago

734
Lots of button examples
tailwind button examples

QQ-VVN

1 year ago

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

Sophia Baker

3 years ago

10.1k
Button
Button with scale animation on hover and translate-y on active

Nabile BABABODI

8 months ago

255
Button with Bouncing Animation

Prashant

4 years ago

15.3k
Review popup form with toggle and stars
Review popup form with toggle and stars

Ayman Reifoun

1 year ago

1.3k
less is more
less is more by salvator

Baraka Salvator

1 year ago

1.5k