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

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.5k
Switch tabs button

Author:
gmer33

2 years ago

16k
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
Buttons variations

Author:
R.P Ketan

2 years ago

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

Author:
Anonymous

1 year ago

2.9k
Amazon shopping buy now button
Amazon shopping buy now button

Author:
OmKar Mehta

1 year ago

1.9k
Componentes para mi empresa
para mi empresa

Author:
BocchiChan

6 months ago

1k
Gradient border button

Author:
Leon Bachmann

3 years ago

16.2k
Buttons set
buttons sets of, primary, outlined, text and link

Author:
Akram Khan

1 year ago

1.7k
Free Animated Gradient Glow Button with Tailwind CSS
A modern, responsive Tailwind CSS button with glowing gradient hover effects, smooth animations, and an integrated SVG icon. Perfect for landing pages, call-to-action buttons, or any stylish UI project. Fully customizable and open source , ready to copy, paste, and use in your projects.

Author:
Homayoun

2 months ago

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

Author:
Banshee

8 months ago

807
Download on the Mac App Store dark button

Author:
Simon Scheffer

2 years ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components