Componente de botones OAuth
Un componente de botones OAuth receptivo diseñado con animaciones atractivas y colores de tono tierra, adecuado para interfaces de redes sociales y compatible con temas oscuros.
Código HTML
<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>Componentes relacionados
Componente de botones OAuth
Un componente simple, limpio y minimalista para mostrar botones de inicio de sesión de OAuth, que se adhiere a los principios de diseño de tipografía suiza / internacional. Cuenta con monocromo en blanco y negro con un color de acento brillante, capacidad de respuesta completa y compatibilidad con modo oscuro, ideal para sitios de documentación o wiki.
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.
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.