<div class="flex flex-col md:flex-row items-center justify-center gap-10 p-10 min-h-screen bg-[#eff7ff] dark:bg-slate-950">
    <label class="group relative cursor-pointer block w-[70px] h-[70px]">
      
        <input type="checkbox" class="peer hidden" />
        
        <!-- Base Button Body -->
        <div class="absolute inset-0 rounded-full flex items-center justify-center bg-white dark:bg-slate-800 shadow-[5px_5px_15px_rgba(0,0,0,0.1),-5px_-5px_15px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_6px_rgba(255,255,255,0.05),4px_4px_10px_rgba(0,0,0,0.5)] transition-all duration-300 group-hover:scale-105 peer-active:scale-95 overflow-hidden z-10">
            
            <!-- Rainbow Jhaler (Glow/Spinning Border) - Activates on Click -->
            <div class="absolute inset-[-100%] opacity-0 peer-checked:opacity-100 transition-opacity duration-500 bg-[conic-gradient(red,yellow,green,cyan,blue,magenta,red)] animate-[spin_3s_linear_infinite] z-0"></div>
            
            <!-- Inner Circle to hide center of rainbow and show border -->
            <div class="absolute inset-[4px] bg-white dark:bg-slate-800 rounded-full z-10 transition-colors duration-300"></div>

            <!-- Outline Thumb Icon (Unliked State) -->
            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-slate-400 absolute z-20 peer-checked:opacity-0 peer-checked:-rotate-45 peer-checked:scale-50 transition-all duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.514" />
            </svg>
            
            <!-- Solid Blue Thumb Icon (Liked State - Shake/Vibrate Effect) -->
            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-blue-500 absolute z-20 opacity-0 scale-0 peer-checked:scale-110 peer-checked:opacity-100 peer-checked:-rotate-12 peer-checked:animate-[bounce_1s_infinite] transition-all duration-500 drop-shadow-[0_0_8px_rgba(59,130,246,0.8)]" fill="currentColor" viewBox="0 0 24 24">
                <path d="M2 10.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5h-3A1.5 1.5 0 012 19.5v-9zM15.263 21c.853 0 1.61-.54 1.85-1.345l3.5-11.667A2 2 0 0018.694 6H13V3a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7.543 8h.082l2.367-3.55a2 2 0 011.664-.895H13v3.5a1.5 1.5 0 001.5 1.5h4.194l-3.5 11.667h-4.017a1.886 1.886 0 01-.485-.06L9 19.5V11l4.004-6.006A3.992 3.992 0 0014 2.5V6a2 2 0 002 2h2.694a.5.5 0 01.478.641l-3.5 11.667a.5.5 0 01-.478.344h-4.017a.386.386 0 01-.097-.012L9 20h6.263z" />
            </svg>
        </div>
    </label>

<button class="relative px-8 py-4 font-black text-white bg-indigo-600 rounded-xl group overflow-hidden active:translate-y-1.5 active:shadow-none shadow-[0_6px_0_#4338ca] dark:shadow-[0_6px_0_#312e81] hover:shadow-[0_4px_0_#4338ca] dark:hover:shadow-[0_4px_0_#312e81] hover:translate-y-[2px] transition-all duration-150 border border-indigo-500">
    <!-- Shiny sliding line effect on hover -->
    <span class="absolute top-0 left-0 w-full h-full bg-white/20 group-hover:translate-x-full -translate-x-full skew-x-12 transition-transform duration-700 ease-out"></span>
    
    <span class="relative flex items-center gap-2">
        <!-- Bouncing arrow icon -->
        <svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        Download Free
    </span>
</button>

<label class="relative inline-flex items-center cursor-pointer group">
    <input type="checkbox" value="" class="sr-only peer">
    <!-- Switch Track -->
    <div class="w-14 h-7 bg-gray-300 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-gradient-to-r peer-checked:from-green-400 peer-checked:to-blue-500 shadow-inner transition-all duration-300 group-hover:shadow-md"></div>
    <!-- Label -->
    <span class="ml-4 text-sm font-extrabold text-gray-700 dark:text-gray-300">Dark Mode</span>
</label>

<button class="group relative px-6 py-3 font-bold text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_15px_rgba(0,0,0,0.4)] border border-gray-100 dark:border-gray-800 hover:border-red-200 dark:hover:border-red-900/50 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all duration-300 flex items-center gap-3">
    <!-- Red aura on hover -->
    <div class="absolute inset-0 rounded-2xl bg-red-400 blur-xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    
    <!-- Heart Icon (Animates on hover) -->
    <svg class="relative w-6 h-6 text-gray-400 dark:text-gray-500 group-hover:text-red-500 group-hover:fill-red-500 transition-all duration-300 group-hover:scale-125 group-active:scale-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
    <span class="relative group-hover:text-red-600 dark:group-hover:text-red-400">Like It!</span>
</button>

<button class="relative inline-flex items-center justify-center px-8 py-3.5 overflow-hidden font-bold text-white bg-blue-600 rounded-full group shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transition-all duration-300">
    <!-- Hover par chalne wala smooth gradient -->
    <span class="absolute inset-0 w-full h-full transition duration-300 ease-out opacity-0 bg-gradient-to-r from-cyan-500 to-blue-600 group-hover:opacity-100"></span>
    <!-- Glass reflection effect -->
    <span class="absolute top-0 left-0 w-full bg-gradient-to-b from-white/30 to-transparent h-1/3 rounded-t-full"></span>
    
    <span class="relative flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
        Login Account
    </span>
</button>

<div class="relative group cursor-pointer inline-block">
    <!-- Yeh hai wo AURA (Roshni) jo peeche se niklegi -->
    <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-xl blur-lg opacity-70 group-hover:opacity-100 transition duration-500 group-hover:duration-200 animate-pulse"></div>
    
    <!-- Main Black Button -->
    <button class="relative px-8 py-4 bg-gray-900 dark:bg-black border border-gray-800 dark:border-gray-700 rounded-xl text-white font-extrabold tracking-widest uppercase overflow-hidden transition-all duration-300 hover:scale-[1.02] shadow-2xl">
        <span class="relative z-10 flex items-center gap-2">
            Get Started
            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
        </span>
    </button>
</div>

<button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-white rounded-xl group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-800 transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(59,130,246,0.4)]">
  <span class="relative px-6 py-3 transition-all ease-in duration-75 bg-gray-900 rounded-[10px] group-hover:bg-opacity-0 flex items-center gap-2">
    <i class="fas fa-rocket text-blue-400 group-hover:text-white transition-colors"></i> 
    <span class="font-bold tracking-wide">Launch Tandav</span>
  </span>
</button>