Gradient Sign In Button

<button type="submit" class="group relative w-full max-w-md flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 transition-all duration-300 font-sans overflow-hidden">
  <div class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/30 to-transparent group-hover:translate-x-full transition-transform duration-500 ease-out"></div>
  <span class="absolute left-0 inset-y-0 flex items-center pl-3">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 group-hover:text-indigo-200 transition-colors text-indigo-300">
      <path d="M5 12h14"></path>
      <path d="m12 5 7 7-7 7"></path>
    </svg>
  </span>
  <span class="relative z-10">Sign in to your account</span>
  <script>
    // Add loading state functionality
    this.addEventListener('click', function(e) {
      if (this.disabled) return;
      
      const originalHTML = this.innerHTML;
      this.innerHTML = '<svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 0 1 4 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Signing in...';
      this.disabled = true;
      
      setTimeout(() => {
        this.innerHTML = originalHTML;
        this.disabled = false;
      }, 2000);
    });
  </script>
</button>