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.
HTML Code
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<button class="flex items-center px-4 py-2 text-white bg-blue-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Google
</button>
<button class="flex items-center px-4 py-2 text-white bg-red-600 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Facebook
</button>
<button class="flex items-center px-4 py-2 text-white bg-blue-800 rounded transition duration-200 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-opacity-50">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="Avatar" class="w-6 h-6 rounded-full mr-2" />
Sign in with Twitter
</button>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
button {
background-color: #1e3a8a;
}
}
</style>Composants associés
Composant Boutons OAuth - Aquarelle/Artistique
Un composant de boutons OAuth artistique et rétro conçu pour les marques de mode et de beauté. Présente des textures douces et peintes, des couleurs vintage atténuées et comprend des options de connexion à Google, Apple et Facebook. Entièrement réactif et prend en charge le mode sombre.
Composant Boutons OAuth
Composant Web comportant des boutons OAuth avec un style de conception 3D, des effets réactifs, la prise en charge du thème sombre et des images d’espace réservé.
Composant Boutons OAuth
Un composant Web complexe pour les boutons OAuth stylisé avec un morphisme de verre et des tons de terre, conçu pour les sites Web d’entreprise/d’entreprise avec réactivité et prise en charge du mode sombre.