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 (☀️ → 🌙)

This tailwind example is contributed by UI-Templates, on 13-Oct-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is Transitions

Button Gradient Animation

Author UI-Templates

Tailwind v3.4 1.1k 2

Fork Fullscreen

<div class="flex flex-col items-center space-y-6">
    <h1 class="text-4xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-500 to-cyan-400">
      Dark Mode UI Toggle
    </h1>

<label class="relative inline-flex items-center cursor-pointer">
      <input id="theme-toggle" type="checkbox" class="sr-only">
      <div class="toggle-track w-14 h-[46px] rounded-full">
        <div class="toggle-btn flex items-center justify-center text-white text-sm font-bold">
          ☀️
        </div>
      </div>
    </label>

<p class="text-sm opacity-80 font-mono">
      Toggle between <span class="text-indigo-500">Light</span> and <span class="text-cyan-400">Dark</span> mode
    </p>
  </div>

// Load saved theme
    if (localStorage.theme === 'dark') {
      html.classList.add('dark');
      toggle.checked = true;
      knob.innerHTML = '🌙';
    }

// Toggle theme
    toggle.addEventListener('change', () => {
      if (toggle.checked) {
        html.classList.add('dark');
        localStorage.theme = 'dark';
        knob.innerHTML = '🌙';
      } else {
        html.classList.remove('dark');
        localStorage.theme = 'light';
        knob.innerHTML = '☀️';
      }
    });
  </script>

<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

Related Examples

Button with Bouncing Animation

Prashant

4 years ago

15.3k
Button with a gradient border using Tailwind CSS

Dipti narayan

3 years ago

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

Anonymous

2 years ago

14.3k
Botton hover
On hover Changes text

davilaarroyo07

2 years ago

7.5k
Animated Gradient Background
animates a gradient background with vibrant colors. Slowly changes colors.

Anonymous

2 years ago

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

Md. Tofayel islam

2 years ago

5k
Animated button
on hover underline will go from left to right

Anonymous

2 years ago

6k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Walid Ahmad

2 years ago

4.3k
Button
Button When Hover and page Reload then Button text will show the animation

Chitranshu

2 years ago

3.4k
Elevated Buton
On hover merge shadow

Anonymous

2 years ago

3.2k
Plug and Play Animated Button for Hero Statements / Landing Pages
REMOVE the bg-black from the outside <button/> div, if you are already using a black background. Besides this, the button is plug and play! Know errors: You may need to remove animate-spin for your usecase, depending on framework rendering. For SvelteKit, animate-spin is NOT needed. But the [animation:spin_4s]... is always necessary for a smooth effect. Check out my profile to join my community online or add me on LinkedIn.

Coastal UI

1 year ago

2.6k
Canlı Yayın Butonu
Pulse efekt içeren canlı yayın butonu.

Sedat Kumcu

1 year ago

2.5k