Componente de botones OAuth
Componente de botones de inicio de sesión OAuth simple y receptivo con un diseño esqueuomórfico, esquema de color análogo y soporte de modo oscuro, adecuado para plataformas de foros / comunidades.
Código HTML
<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>Componentes relacionados
Componente de botones OAuth
Un componente web complejo para botones OAuth con estilo de cristal y tonos tierra, diseñado para sitios web empresariales/corporativos con capacidad de respuesta y compatibilidad con modo oscuro.
Componente de botones OAuth
Componente de botones OAuth de Glassmorphism con efectos responsivos y soporte para temas oscuros.
Componente de botones OAuth
Un componente de botones OAuth receptivo diseñado para el modo oscuro con un esquema de color análogo, con múltiples elementos interactivos para las redes sociales.