Home
SHARIFUL ISLAM
Interactive Toggle Switch with Smooth Animation

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 CSS v3. It is responsive.

Button Toggle switch

Author SHARIFUL ISLAM

1.8k

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

Author:
TailwindFlex

3 years ago

10.8k
Switch tabs button

Author:
gmer33

2 years ago

16.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

21.6k
Border bottom button

Author:
Santos78

2 years ago

12.7k
future ai robot
this an ai template by salvator

Author:
Baraka Salvator

9 months ago

1.2k
Join now button
Attractive button for the CTA section

Author:
Matej Kovač

1 year ago

2.6k
Gradient Button
These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Author:
Md. Tofayel islam

1 year ago

4.4k
Continue with Discord button
Login with the Discord button for social login

Author:
Anonymous

2 years ago

12.9k
Social Share
A social media showcase

Author:
Rajesh Maheshwari

1 year ago

1k
sidebar elastico

Author:
Raul antonio de la cruz hernandez

7 months ago

639
Simple buttons for links

Author:
Amit Pachange

3 years ago

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

Author:
Anonymous

2 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components