Composant Suivre le bouton
Un composant de bouton de suivi simple et réactif conçu pour les plateformes de rencontres/sociales avec une palette de couleurs pastel et une prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="follow-button flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold transition-all duration-300 ease-in-out
bg-gradient-to-r from-purple-200 to-pink-200 text-purple-800 dark:from-purple-800 dark:to-pink-800 dark:text-white
hover:from-purple-300 hover:to-pink-300 hover:text-purple-900 dark:hover:from-purple-700 dark:hover:to-pink-700 dark:hover:text-white
focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
shadow-lg hover:shadow-xl">
<svg class="h-5 w-5 mr-2 -ml-1 text-purple-700 dark:text-purple-300" 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 0zM8 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
Follow
</button>
</div>Composants associés
Composant de bouton de suivi neumorphe
Un composant de bouton de suivi complexe, de style neumorphe, avec des tons crépuscules/chauds, conçu pour les plateformes immobilières. Il présente un design réactif et une prise en charge du mode sombre, donnant l’impression que les éléments s’extrudent de l’arrière-plan à l’aide d’ombres subtiles.
Composant Suivre le bouton
Un composant de bouton de suivi réactif conçu selon les principes de Material Design, avec prise en charge du mode sombre et des styles personnalisés à l’aide de Tailwind CSS.
Composant Suivre le bouton
Un composant de bouton « Suivre » réactif avec une palette de couleurs bonbon/doux, conçu pour les sites d’emploi et les plateformes de carrière, avec prise en charge du mode sombre.