Botón de seguimiento de glassmorphism
Componente de botón de seguimiento de Glassmorphism para redes sociales con tema oscuro
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
</div>
<button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Follow
</button>
</div>
</div>
</div>Componentes relacionados
Componente del botón Seguir
Un componente de botón de seguimiento complejo y receptivo con estilo de cristal y colores vibrantes, diseñado para sitios web comerciales con soporte para modo oscuro mediante Tailwind CSS.
Componente de botón de seguimiento: estilo monoespaciado/de desarrollador
Un componente complejo e interactivo del botón de seguimiento diseñado para sitios web de noticias/periodismo, con una estética monoespaciada/de desarrollador con colores en tono joya y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.
Componente del botón Seguir
Un botón "Seguir" limpio y minimalista diseñado con una paleta de colores retro/vintage, adecuado para un panel de control o una página de perfil. Cuenta con un estado de desplazamiento interactivo y soporte para el modo oscuro, que incorpora los principios de tipografía suizos/internacionales.