Componente del botón Seguir
Un componente de botón 'Seguir' receptivo diseñado para plataformas de bienes raíces, con un esquema de color azul corporativo, soporte para modo oscuro y un sutil efecto de desplazamiento interactivo.
Código HTML
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="relative flex items-center justify-center px-6 py-2 overflow-hidden font-semibold text-white transition-all duration-300 ease-in-out bg-blue-600 rounded-lg group shadow-lg dark:bg-blue-700 dark:shadow-blue-900/50 hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
<span class="relative z-10 text-base group-hover:text-white transition-colors duration-200">
Follow
</span>
<svg class="absolute w-0 h-0 transition-all duration-300 ease-in-out transform -translate-x-full opacity-0 group-hover:opacity-100 group-hover:w-6 group-hover:h-6 group-hover:translate-x-0 group-hover:text-white" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
<span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 rounded-lg opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"></span>
</button>
</div>Componentes relacionados
Glassmorphism_Music_Follow_Button_Component
Un componente de botón de seguimiento de cristal complejo y monocromático diseñado para plataformas de música y audio, con elementos translúcidos similares al vidrio esmerilado con efectos de desenfoque, totalmente sensible y con soporte para modo oscuro.
Componente del botón Seguir
Un componente de botón de seguimiento receptivo diseñado en el estilo de Material Design con soporte de modo oscuro usando Tailwind CSS.
Componente del botón Seguir
Un componente de botón "Seguir" complejo y receptivo con degradado y transiciones de color apagadas, diseñado para plataformas inmobiliarias. Incluye soporte para el modo oscuro y utiliza HTML semántico.