Componente de botones OAuth
Un componente de botones OAuth responsivo con un estilo de diseño 3D, compatibilidad con temas oscuros e imágenes de marcador de posición. El componente cuenta con botones para Google, Facebook, Twitter y LinkedIn, con efectos de desplazamiento para mayor profundidad y participación.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
<div class="space-y-4">
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
<img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
Google
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
<img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
Facebook
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
<img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
Twitter
</a>
<a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
<img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
LinkedIn
</a>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
</style>Componentes relacionados
Componente de botones OAuth
Un componente de botones OAuth simple y receptivo diseñado en estilo esqueuomórfico con una combinación de colores vibrantes, adaptado para plataformas de comercio electrónico y compatible con el modo oscuro.
Componente de botones OAuth
Un componente de botones OAuth receptivo con diseño de skeuomorfismo, combinación de colores análoga e interacciones complejas, adecuado para interfaces de redes sociales. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo, sin JavaScript. Imágenes extraídas de Lorem Picsum y RandomUser.me.
Componente de botones OAuth
Un componente de botones OAuth de estilo Neumorphism diseñado para un blog o una plataforma de consumo de contenido. El componente cuenta con botones para varios proveedores de OAuth con un diseño receptivo, compatibilidad con temas oscuros y un esquema de color monocromático.