Composants Boutons OAuth Composant Boutons OAuth

Composant Boutons OAuth

Composant avec des micro-interactions pour un portfolio, avec une palette de couleurs vives et une mise en page simple, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-gray-900 dark:to-gray-800 p-4">
  <h2 class="text-4xl font-extrabold text-white dark:text-gray-100 mb-8 animate-fade-in-down">Join the Future</h2>
  <div class="flex flex-col space-y-4">
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Google
      <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Facebook_F_icon.svg" alt="Facebook Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with Facebook
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
    <button class="relative flex items-center justify-center px-6 py-3 rounded-full bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100 text-lg font-semibold shadow-xl transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-white focus:ring-opacity-50 group">
      <img src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg" alt="GitHub Logo" class="w-6 h-6 mr-3 group-hover:animate-bounce">
      Sign in with GitHub
       <span class="absolute top-0 right-0 -mr-4 -mt-2 w-4 h-4 bg-gray-600 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping"></span>
    </button>
  </div>
</div>

<style>
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.8s ease-out forwards;
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(-5%);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 1s infinite;
  }

  @keyframes ping {
    0% {
      transform: scale(0.2); 
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5); 
      opacity: 0;
    }
  }

  .group-hover\:animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
</style>

Composants associés

Boutons OAuth Composant 1

Un composant qui affiche des boutons OAuth avec des animations attrayantes et la prise en charge du mode sombre, en utilisant Tailwind CSS pour la conception. Les boutons réagissent aux actions de l’utilisateur par des micro-interactions subtiles, et les images sont incluses à partir de sources d’espace réservé aléatoires.

Ouvrir