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.5k 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

11.1k
Switch tabs button

gmer33

3 years ago

17.5k
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.3k
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1.1k
Animated Light/Dark Mode Toggle
👉🏻3D glow effects on knob & track 👉🏻Gradient transitions that look holographic 👉🏻Animated pulse when active 👉🏻Dark background gradient instead of a flat color 👉🏻Emoji swap (☀️ → 🌙)

UI-Templates

1 year ago

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

Anonymous

3 years ago

14.3k
tradition music
by salvator

Baraka Salvator

1 year ago

1.5k
Settings Button

Arya

4 years ago

11.6k
Responsive SaaS Pricing Cards with Monthly Yearly Toggle

JUGENDRA GANGWAR

2 months ago

115
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

SHARIFUL ISLAM

1 year ago

1.8k
neon-button-purple

Mohammad Rashel

10 months ago

758
Sign in with facebook button

Conan Hilton

4 years ago

11.6k