Botón Seguir con microinteracciones
Componente de botón de seguimiento responsivo con soporte para temas oscuros y microinteracciones, diseñado para aplicaciones de redes sociales que utilizan Tailwind CSS. Cuenta con un esquema de color monocromático y elementos interactivos complejos.
Código HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative inline-block group">
<button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
Follow
</button>
<div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
</div>
</div>Componentes relacionados
Botón Seguir
Componente de botón de seguimiento de la interfaz de usuario del modo oscuro con efectos responsivos y compatibilidad con temas oscuros.
Botón de seguimiento de glassmorphism
Componente de botón de seguimiento de Glassmorphism para redes sociales con tema oscuro
Componente del botón Seguir
Un componente de botón de seguimiento diseñado en el estilo brutalista con alto contraste y una apariencia cruda y audaz. Es responsivo y admite temas oscuros.