Rechercher des composants

Catégories

Composants Bouton Suivre

Bouton Suivre

Bouton pour suivre des utilisateurs ou des sujets

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.

Ouvrir Aperçu

                <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>

Composant Suivre le bouton

Un bouton de suivi de style Neumorphism pour un tableau de bord avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
    <button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
        <span class="relative text-white font-bold text-lg">
            Follow
        </span>
    </button>
</div>

Bouton Suivre

Composant de bouton de suivi de l’interface utilisateur en mode sombre avec effets réactifs et prise en charge du thème sombre.

Ouvrir Aperçu

                <button
  class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out"
>
  Follow
</button>

Bouton Suivre

Un simple bouton de suivi avec un style Material Design, des effets réactifs et la prise en charge du thème sombre.

Ouvrir Aperçu

                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out dark:bg-gray-700 dark:hover:bg-gray-800 dark:shadow-lg">Follow</button>

Composant Suivre le bouton

Un composant de bouton de suivi réactif conçu dans le style Material Design avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

Glassmorphism Suivre le bouton

Un bouton de suivi réactif avec le design Glassmorphism, la prise en charge du mode sombre, utilisant Tailwind CSS.

Ouvrir Aperçu

                <template>
  <button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
      Follow
    </span>
  </button>
</template>

Composant Suivre le bouton

Un composant de bouton de suivi conçu dans le style brutalisme avec un contraste élevé et une apparence brute et audacieuse. Il est réactif et prend en charge les thèmes sombres.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <img class="mb-4 rounded-full border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" width="100" height="100">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Follow Us</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-4">Join our community and stay updated with our latest content!</p>
    <a href="#" class="px-4 py-2 text-lg font-bold text-white bg-black dark:bg-white dark:text-black border-4 border-black dark:border-white hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-300">Follow</a>
</div>

BrutalisteFollowButton

Un bouton de suivi brutaliste avec prise en charge du mode réactif et sombre.

Ouvrir Aperçu

                <button class="bg-black text-white font-bold py-2 px-4 border border-black active:bg-zinc-700 active:border-zinc-700 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50 dark:bg-white dark:text-black dark:border-white dark:active:bg-zinc-300 dark:active:border-zinc-300 dark:focus:ring-white">Follow</button>

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.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
      <div class="flex-1">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
        <p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Follow
      </button>
    </div>
  </div>
</div>