Composants Bouton Suivre Bouton de suivi avec micro-interactions

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.

Aperçu

HTML Code

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative inline-block group">
    <button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
      Follow
    </button>
    <div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
  </div>
</div>

Composants associés

Glassmorphism Suivre le bouton

Composant de bouton de suivi Glassmorphism pour les médias sociaux avec thème sombre

Ouvrir

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.

Ouvrir

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.

Ouvrir