Bouton Suivre

Composant Suivre le bouton

Un composant complexe de bouton de suivi conçu avec un effet de glassmorphism, utilisant une palette de couleurs complémentaires, adapté aux applications de commerce électronique, avec un design réactif et une prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
        <div class="flex flex-col items-center">
            <img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
            <h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
            <p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
                Follow
            </button>
            <div class="flex items-center justify-between mt-4 w-full">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
                <img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
            </div>
        </div>
    </div>
</div>

Bouton de suivi 3D-Vibrant

Un composant de bouton de suivi simple, inspiré de la 3D, avec des couleurs vives pour les sites Web d’entreprise. Il est réactif et inclut la prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.

Ouvrir l’aperçu

                <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md shadow-lg transform transition duration-300 hover:scale-105 active:scale-95 dark:bg-blue-800 dark:hover:bg-blue-900 dark:shadow-xl"> Follow </button>

Bouton de suivi de la conception matérielle

Un composant de bouton de suivi Material Design réactif et monochrome pour les blogs, avec prise en charge du mode sombre.

Ouvrir l’aperçu

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

Composant Suivre le bouton

Un composant de bouton de suivi complexe et réactif avec un style glassmorphism et des couleurs vives, conçu pour les sites Web d’entreprise avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
    <div class="flex flex-col items-center">
      <img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
      <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
      <button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
        Follow
      </button>
      <div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
          </svg>
          <span>1.2k Followers</span>
        </div>
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
          </svg>
          <span>250 Following</span>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.glass {
  background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
    background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>

Glassmorphism Suivre le bouton

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

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
        <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
      </div>
      <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Follow
      </button>
    </div>
  </div>
</div>

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

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

Catégories

Bouton Suivre