Home
UI-Templates
Animated Light/Dark Mode Toggle

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example is Transitions

Button Gradient Animation

Author UI-Templates

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>
</main>
   
<div class="flex items-center justify-start">
<a href="https://discord.gg/95CveWrbK8"
   class="bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2 px-4 rounded-xl shadow-xl transition-all">
  Join my Discord
</a>
</div>

Related Examples

Button with Bouncing Animation

Author:
Prashant

3 years ago

13.8k
Button with a gradient border using Tailwind CSS

Author:
Dipti narayan

2 years ago

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

Author:
Anonymous

1 year ago

12.8k
Botton hover
On hover Changes text

Author:
davilaarroyo07

1 year ago

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

Author:
Anonymous

1 year ago

25k
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

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

Author:
Anonymous

1 year ago

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

Author:
Walid Ahmad

1 year ago

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

Author:
Chitranshu

1 year ago

2.3k
Elevated Buton
On hover merge shadow

Author:
Anonymous

1 year ago

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

Author:
Coastal UI

11 months ago

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

Author:
Sedat Kumcu

11 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components