Composant Boutons OAuth
Composant de boutons de connexion OAuth simple et réactif avec un design skeuomorphe, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux plates-formes de forum/communauté.
HTML Code
<div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen">
<div class="w-full max-w-sm p-6 sm:p-8 md:p-10 bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 rounded-xl shadow-2xl transition-all duration-300 ease-in-out
border border-blue-200 dark:border-gray-600
hover:shadow-3xl hover:border-blue-300 dark:hover:border-gray-500
">
<h2 class="text-center text-2xl sm:text-3xl font-extrabold mb-8 text-indigo-800 dark:text-indigo-200
text-shadow-light dark:text-shadow-dark
">Join the Community</h2>
<div class="space-y-6">
<button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
bg-gradient-to-br from-blue-500 to-blue-600 text-white
hover:from-blue-600 hover:to-blue-700
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
active:from-blue-700 active:to-blue-800 active:shadow-inner
transform transition-all duration-200
relative group overflow-hidden
">
<svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.0003 12.72L19.2003 8.35999L12.0003 4L4.8003 8.35999L12.0003 12.72ZM12.0003 14.28L4.8003 9.91999L12.0003 18.5999L19.2003 9.91999L12.0003 14.28Z" fill="#FFFFFF"></path>
<path d="M12.0003 4L19.2003 8.36V16.64L12.0003 21L4.8003 16.64V8.36L12.0003 4Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="z-10">Continue with Google</span>
<div class="absolute inset-0 bg-blue-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
</button>
<button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
bg-gradient-to-br from-purple-500 to-purple-600 text-white
hover:from-purple-600 hover:to-purple-700
focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800
active:from-purple-700 active:to-purple-800 active:shadow-inner
transform transition-all duration-200
relative group overflow-hidden
">
<svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.082-.74.082-.725.082-.725 1.204.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.305 3.492.997.107-.775.418-1.305.762-1.604-2.665-.3-5.466-1.332-5.466-5.93 0-1.312.465-2.387 1.229-3.22-.124-.3-.535-1.524.118-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.876.118 3.176.766.833 1.229 1.908 1.229 3.22 0 4.604-2.801 5.621-5.476 5.922.429.369.816 1.096.816 2.209v3.291c0 .319.192.694.8 0 4.767-1.589 8.197-6.095 8.197-11.389 0-6.627-5.373-12-12-12z"/>
</svg>
<span class="z-10">Continue with GitHub</span>
<div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
</button>
<button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
bg-gradient-to-br from-pink-500 to-pink-600 text-white
hover:from-pink-600 hover:to-pink-700
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
active:from-pink-700 active:to-pink-800 active:shadow-inner
transform transition-all duration-200
relative group overflow-hidden
">
<svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024.044.012.064.024.06.032.004.008-.008.012-.008.016v-1.92h-.008c-.004 0-.008.004-.008.012-.004 0-.008.004-.008.008-.004.004-.004.004-.004.004-.004 0-.004 0-.004-.004-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.008-.004-.008-.004-.008-.004-.012-.008-.016-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008h-.008c-.004 0-.008-.004-.008-.008s-.004-.012-.004-.02c-.004-.008-.004-.016-.004-.02-.004-.004-.004-.008-.004-.012-.004-.008-.004-.016-.004-.024-.004-.008-.004-.016-.004-.024 0-.008-.004-.012-.004-.016-.004-.008-.004-.012-.004-.016-.004-.008.004-.012.004-.016.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024A10 10 0 0112 2C6.477 2 2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471z" />
</svg>
<span class="z-10">Continue with Apple</span>
<div class="absolute inset-0 bg-pink-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
</button>
</div>
<div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
Or <a href="#" class="font-medium text-indigo-700 hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-100">sign in with email</a>
</div>
</div>
</div>
<style>
/* Custom utility classes for skeuomorphism */
.text-shadow-light {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 2px rgba(0, 0, 0, 0.2);
}
.dark .text-shadow-dark {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.2);
}
</style>Composants associés
Composant Boutons OAuth
Un composant de boutons OAuth réactif avec un design Skeuomorphism, une palette de couleurs analogue et des interactions complexes, adapté aux interfaces de médias sociaux. Inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style, sans JavaScript. Images tirées de Lorem Picsum et RandomUser.me.
Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu en mode sombre à l’aide de Tailwind CSS, avec des arrière-plans sombres et des éléments d’interface utilisateur optimisés pour les environnements à faible luminosité.
Composant Boutons OAuth
Un composant de boutons OAuth réactif conçu pour le mode sombre avec une palette de couleurs vives, adapté aux sites Web d’entreprise professionnels.