Componente 1 de los botones OAuth
Un componente que muestra botones OAuth con animaciones atractivas y compatibilidad con el modo oscuro, utilizando Tailwind CSS para el diseño. Los botones responden a las acciones del usuario con microinteracciones sutiles, y se incluyen imágenes de fuentes de marcadores de posición aleatorios.
Código HTML
<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>Componentes relacionados
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 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.
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.