Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu avec des animations attrayantes et des couleurs de terre, adapté aux interfaces de médias sociaux et prenant en charge les thèmes sombres.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
Google
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
Facebook
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
Twitter
</button>
<button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
GitHub
</button>
</div>Composants associés
Composant Boutons OAuth
Composant OAuth Buttons de style Neumorphism conçu pour un blog ou une plate-forme de consommation de contenu. Le composant comporte des boutons pour divers fournisseurs OAuth avec un design réactif, une prise en charge du thème sombre et une palette de couleurs monochromatiques.
Composant Boutons OAuth
Un composant Web pour les boutons d’authentification OAuth stylisé avec neumorphisme, conçu pour un portfolio, et comprend une mise en page réactive avec prise en charge du thème sombre.
Composant Boutons OAuth
Un composant de boutons OAuth simple et réactif conçu dans un style skeuomorphe avec une palette de couleurs vives, adapté aux plateformes de commerce électronique et prenant en charge le mode sombre.