Composant Suivre le bouton
Un composant de bouton « Suivre » réactif conçu pour les plateformes immobilières, avec une palette de couleurs bleues d’entreprise, la prise en charge du mode sombre et un subtil effet de survol interactif.
HTML Code
<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>Composants associés
Bouton de suivi avec micro-interactions
Composant de bouton de suivi réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les applications de médias sociaux utilisant Tailwind CSS. Comprend une palette de couleurs monochromatiques et des éléments interactifs complexes.
Glassmorphism_Music_Follow_Button_Component
Un composant de bouton de suivi complexe et monochromatique conçu pour les plateformes musicales et audio, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou, entièrement réactif et avec prise en charge du mode sombre.
3D_Analogous_Simple_Follow_Button_Component
Un bouton « Suivre » simple et réactif avec une esthétique 3D et une palette de couleurs analogue, adapté à un site de portfolio, prenant en charge les modes clair et sombre.