Componente del botón Seguir
Un componente de botón 'Seguir' receptivo con una combinación de colores dulces/dulces, diseñado para bolsas de trabajo y plataformas de carrera, con soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="flex items-center justify-center space-x-2 px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-in-out
bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500
hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
shadow-lg shadow-pink-300/50 dark:shadow-pink-800/50
active:scale-95
dark:text-gray-100 dark:bg-gradient-to-r dark:from-pink-700 dark:via-purple-700 dark:to-indigo-700
dark:hover:from-pink-800 dark:hover:via-purple-800 dark:hover:to-indigo-800
dark:focus:ring-pink-600
">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
</svg>
<span>Follow Now</span>
</button>
</div>
Componentes relacionados
Componente de botón de seguimiento retro
Un componente de botón de seguimiento simple y receptivo con una estética retro / vintage, combinación de colores complementaria y propósito de juego, incluida la compatibilidad con el modo oscuro.
Botón de seguimiento de glassmorphism
Un botón de seguimiento responsivo con diseño de Glassmorphism, soporte de modo oscuro, usando 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.