OAuth Buttons Component - Watercolor/Artistic

<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-rose-50 to-pink-100 dark:from-stone-900 dark:to-purple-950 font-sans">
  <div class="relative w-full max-w-md p-8 md:p-10 rounded-3xl shadow-xl overflow-hidden
    bg-white/70 backdrop-blur-sm dark:bg-gray-800/70
    border border-pink-200 dark:border-purple-800
    font-semibold text-gray-800 dark:text-gray-100">

    <!-- Background artistic elements -->
    <div class="absolute inset-0 z-0 opacity-50 dark:opacity-30">
      <img src="https://picsum.photos/id/1069/800/800" alt="background texture 1" class="absolute top-0 -left-10 w-[500px] h-[500px] object-cover object-center scale-150 rotate-12 blur-md opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: ellipse(60% 40% at 50% 50%); filter: contrast(1.2) hue-rotate(30deg);"/>
      <img src="https://picsum.photos/id/1070/800/800" alt="background texture 2" class="absolute bottom-0 -right-10 w-[500px] h-[500px] object-cover object-center scale-150 -rotate-12 blur-md opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: ellipse(60% 40% at 50% 50%); filter: contrast(1.2) hue-rotate(-30deg);"/>
    </div>
    <div class="absolute inset-0 z-0 bg-gradient-to-br from-rose-100/30 via-sky-100/30 to-purple-100/30 dark:from-stone-900/50 dark:via-gray-900/50 dark:to-purple-900/50 mix-blend-multiply"></div>

    <!-- Content -->
    <div class="relative z-10 flex flex-col items-center">
      <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-center mb-4 text-violet-700 dark:text-purple-300 drop-shadow-sm font-serif" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.1);">
        Unlock Your Style
      </h2>
      <p class="text-center text-sm md:text-md mb-8 text-gray-700 dark:text-gray-300 max-w-sm">
        Sign in for exclusive beauty tips, fashion collections, and personalized offers.
      </p>

      <div class="space-y-4 w-full">
        <!-- Google Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-amber-100 border border-amber-300 text-amber-800 
          hover:bg-amber-200 hover:border-amber-400
          dark:bg-yellow-700 dark:border-yellow-600 dark:text-yellow-100
          dark:hover:bg-yellow-600 dark:hover:border-yellow-500
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5 
          leading-none text-lg font-bold font-heading"
          style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 80%); filter: saturate(1.1);">
          <svg class="w-6 h-6 mr-3" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24.001 10.231c4.542 0 7.854 1.936 9.684 3.73l6.577-6.529C35.485 3.398 29.986 0 24.001 0c-8.913 0-16.592 4.908-20.485 12.012l7.251 5.617c1.942-5.719 7.426-9.172 13.234-9.172z" fill="#EA4335"/>
            <path d="M46.726 23.905c0-1.5-.121-2.909-.345-4.256H24.001v8.082h12.529c-.544 3.031-2.222 5.59-4.881 7.301l6.471 5.011c3.96-7.301 6.27-16.568 6.27-26.138z" fill="#4285F4"/>
            <path d="M3.516 29.808l7.251-5.617c-.506-1.564-.784-3.232-.784-4.891s.278-3.327.784-4.891l-7.251-5.617C.949 14.59.001 19.167.001 23.905s.949 9.315 3.515 13.56z" fill="#FBBC05"/>
            <path d="M24.001 48c6.643 0 12.261-2.091 16.34-5.679l-6.471-5.011c-2.457 1.637-5.59 2.59-9.869 2.59-8.497 0-13.844-5.719-15.969-13.913l-7.251 5.617C7.409 43.092 15.088 48 24.001 48z" fill="#34A853"/>
          </svg>
          Sign in with Google
        </button>

        <!-- Apple Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-gray-900 border border-black text-white 
          hover:bg-gray-800 hover:border-gray-900
          dark:bg-gray-200 dark:border-gray-50 dark:text-gray-900
          dark:hover:bg-gray-300 dark:hover:border-gray-100
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5
          leading-none text-lg font-bold font-heading"
          style="background-image: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 80%); filter: saturate(1.1);">
          <svg class="w-6 h-6 mr-3 text-white dark:text-gray-900" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.5c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5zm0 2.5c-4.962 0-9 4.038-9 9s4.038 9 9 9 9-4.038 9-9-4.038-9-9-9zM12 6c.942 0 1.7.758 1.7 1.7S12.942 9.4 12 9.4s-1.7-.758-1.7-1.7S11.058 6 12 6zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2zm0 3c-2.316 0-4.2 1.884-4.2 4.2s1.884 4.2 4.2 4.2 4.2-1.884 4.2-4.2-1.884-4.2-4.2-4.2zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2zM12 12c.942 0 1.7.758 1.7 1.7S12.942 15.4 12 15.4s-1.7-.758-1.7-1.7S11.058 12 12 12zm0 1.5a.2.2 0 01.2.2.2.2 0 01-.2.2.2.2 0 01-.2-.2.2.2 0 01.2-.2z"/>
            <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.5c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5S17.799 1.5 12 1.5z" clip-rule="evenodd" fill-rule="evenodd"/>
            <path d="M12 10.428a2.572 2.572 0 100-5.144 2.572 2.572 0 000 5.144zm0 2.5c-3.149 0-5.7 2.551-5.7 5.7s2.551 5.7 5.7 5.7 5.7-2.551 5.7-5.7-2.551-5.7-5.7-5.7z"/>
          </svg>
          Sign in with Apple
        </button>

        <!-- Facebook Button -->
        <button class="flex items-center justify-center w-full px-6 py-3 rounded-xl 
          bg-blue-600 border border-blue-700 text-white 
          hover:bg-blue-700 hover:border-blue-800
          dark:bg-blue-800 dark:border-blue-700 dark:text-blue-100
          dark:hover:bg-blue-700 dark:hover:border-blue-600
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5
          leading-none text-lg font-bold font-heading">
          <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 5.295 3.882 9.697 8.948 10.366V15h-2.915v-3h2.915V9.45c0-2.88 1.758-4.45 4.33-4.45 1.237 0 2.302.09 2.61.127v2.261h-1.332c-1.307 0-1.562.619-1.562 1.528V12h3.137l-.547 3h-2.59V22.366c5.066-.669 8.948-5.071 8.948-10.366z"/>
            <path fill-rule="evenodd" d="M22.5 12c0-5.799-4.701-10.5-10.5-10.5S1.5 6.201 1.5 12c0 5.295 3.882 9.697 8.948 10.366V15h-2.915v-3h2.915V9.45c0-2.88 1.758-4.45 4.33-4.45 1.237 0 2.302.09 2.61.127v2.261h-1.332c-1.307 0-1.562.619-1.562 1.528V12h3.137l-.547 3h-2.59V22.366c5.066-.669 8.948-5.071 8.948-10.366z" clip-rule="evenodd"/>
          </svg>
          Sign in with Facebook
        </button>
      </div>

      <div class="flex items-center w-full mt-8 mb-6">
        <hr class="flex-grow border-t border-gray-300 dark:border-gray-600">
        <span class="px-4 text-gray-500 dark:text-gray-400 text-sm italic">Or</span>
        <hr class="flex-grow border-t border-gray-300 dark:border-gray-600">
      </div>

      <!-- Email Password Section -->
      <form class="w-full space-y-4">
        <div>
          <label for="email" class="sr-only">Email address</label>
          <input type="email" id="email" placeholder="Your email address" autocomplete="email"
            class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-violet-400 focus:border-transparent 
            bg-gray-50/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 
            transition-colors duration-200 ease-in-out font-medium shadow-sm leading-tight"
            style="mix-blend-mode: multiply; dark:mix-blend-mode: screen; filter: saturate(1.1);">
        </div>
        <div>
          <label for="password" class="sr-only">Password</label>
          <input type="password" id="password" placeholder="Password" autocomplete="current-password"
            class="w-full px-5 py-3 rounded-xl border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-violet-400 focus:border-transparent 
            bg-gray-50/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 
            transition-colors duration-200 ease-in-out font-medium shadow-sm leading-tight"
            style="mix-blend-mode: multiply; dark:mix-blend-mode: screen; filter: saturate(1.1);">
        </div>
        <button type="submit" class="w-full px-6 py-3 rounded-xl text-lg font-bold 
          bg-gradient-to-r from-pink-400 to-purple-500 text-white 
          hover:from-pink-500 hover:to-purple-600 
          dark:from-fuchsia-600 dark:to-violet-700 
          dark:hover:from-fuchsia-700 dark:hover:to-violet-800 
          transition-all duration-300 ease-in-out shadow-lg 
          hover:shadow-xl transform hover:-translate-y-0.5 mt-4 
          font-heading tracking-wide"
          style="background-image: linear-gradient(to right, #ec4899, #ec4899 50%, #8b5cf6 50%, #8b5cf6); background-size: 200% 100%; transition: background-position 0.3s cubic-bezier(0.4, 0, 0.2, 1); filter: saturate(1.2);"
          onmouseover="this.style.backgroundPosition = '-100% 0';" onmouseout="this.style.backgroundPosition = '0 0';">
          Sign In
        </button>
      </form>

      <div class="mt-6 text-center text-sm md:text-base text-gray-600 dark:text-gray-300">
        Don't have an account? 
        <a href="#" class="text-violet-600 dark:text-purple-400 hover:underline font-semibold">
          Sign Up
        </a>
      </div>

    </div>
  </div>
</div>

<style>
  /* Adding custom font definitions for more artistic feel */
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;500;700&display=swap');

  .font-serif {
    font-family: 'Playfair Display', serif;
  }
  .font-sans {
    font-family: 'Quicksand', sans-serif;
  }
  .font-heading {
    font-family: 'Quicksand', sans-serif;
  }
</style>