Rechercher des composants

Catégories

Composants Bouton Suivre

Bouton Suivre

Bouton pour suivre des utilisateurs ou des sujets

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.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="flex items-center justify-center space-x-2 px-6 py-3 rounded-full text-lg font-semibold text-white transition-all duration-300 ease-in-out
    bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500
    hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600
    focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
    shadow-lg shadow-pink-300/50 dark:shadow-pink-800/50
    active:scale-95
    dark:text-gray-100 dark:bg-gradient-to-r dark:from-pink-700 dark:via-purple-700 dark:to-indigo-700
    dark:hover:from-pink-800 dark:hover:via-purple-800 dark:hover:to-indigo-800
    dark:focus:ring-pink-600
    ">
    <svg class="w-6 h-6" 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 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
    </svg>
    <span>Follow Now</span>
  </button>
</div>

Composant du bouton de suivi rétro

Un composant de bouton de suivi simple et réactif avec une esthétique rétro/vintage, une palette de couleurs complémentaires et un objectif de jeu, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="relative group flex items-center justify-center px-6 py-3 font-bold uppercase tracking-wider text-xl text-yellow-900 dark:text-yellow-100 transition-all duration-300 ease-in-out
    bg-gradient-to-br from-yellow-400 to-orange-500
    dark:from-yellow-700 dark:to-orange-800
    border-2 border-yellow-700 dark:border-yellow-900
    shadow-lg shadow-yellow-500/50 dark:shadow-yellow-900/50
    transform skew-x-[-10deg] hover:skew-x-0
    overflow-hidden
    rounded-lg
    focus:outline-none focus:ring-4 focus:ring-yellow-600 dark:focus:ring-yellow-800">
    
    <span class="relative z-10 flex items-center gap-2">
      <svg class="h-6 w-6 text-yellow-900 dark:text-yellow-100 transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-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 0zM12 14v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0z"></path>
      </svg>
      <span class="transform -skew-x-[10deg] group-hover:skew-x-0 transition-transform duration-300">Follow Player</span>
    </span>

    <div class="absolute inset-0 bg-yellow-300 dark:bg-yellow-600 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"></div>

    <div class="absolute inset-0 border-2 border-yellow-800 dark:border-orange-900 border-dashed opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none transform scale-105 group-hover:scale-100"></div>

    <span class="absolute top-0 left-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform -translate-x-1/2 -translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
    <span class="absolute bottom-0 right-0 w-4 h-4 bg-yellow-700 dark:bg-yellow-900 transform translate-x-1/2 translate-y-1/2 rotate-45 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out"></span>
  </button>
</div>

Un composant de bouton « Suivre » complexe et réactif avec des dégradés et des transitions de couleurs sourdes, conçu pour les plateformes immobilières. Inclut la prise en charge du mode sombre et utilise le HTML sémantique.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-xs w-full bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden transform transition-all duration-300 hover:shadow-xl">
    <div class="relative h-32 bg-gradient-to-br from-gray-300 via-gray-400 to-gray-500 dark:from-gray-700 dark:via-gray-600 dark:to-gray-500 flex items-end p-4">
      <img class="absolute inset-0 w-full h-full object-cover opacity-70" src="https://picsum.photos/300/200?random=1" alt="Background image">
      <div class="relative z-10 w-20 h-20 rounded-full border-4 border-white dark:border-gray-800 shadow-lg content-center flex-shrink-0">
        <img class="w-full h-full rounded-full object-cover" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Agent Avatar">
      </div>
    </div>
    
    <div class="p-4 text-center">
      <h3 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100 mb-1">Sarah Johnson</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">Real Estate Agent</p>
      
      <div class="flex justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-4">
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          <span>New York, USA</span>
        </div>
        <div class="flex items-center text-sm">
          <svg class="w-4 h-4 mr-1 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
          <span>5 Years Exp.</span>
        </div>
      </div>
      
      <button class="w-full px-6 py-3 rounded-full font-medium text-white shadow-md
        bg-gradient-to-r from-gray-500 to-gray-600
        dark:from-gray-600 dark:to-gray-700
        hover:from-gray-600 hover:to-gray-700
        dark:hover:from-gray-700 dark:hover:to-gray-800
        transition-all duration-300 ease-in-out
        transform hover:-translate-y-0.5 hover:shadow-lg
        focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75
      ">
        Follow Agent
      </button>
    </div>
  </div>
</div>

Composant de bouton de suivi neumorphe

Un composant de bouton de suivi neumorphe complexe et interactif avec des tons océan/bleu, conçu pour les interfaces de médias sociaux. Comprend la prise en charge du mode sombre et la conception réactive.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-blue-100 dark:bg-gray-900 transition-colors duration-300">
  <!-- Neumorphic Follow Card Container -->
  <div class="w-full max-w-sm p-6 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
    <div class="flex flex-col items-center space-y-5">
      <!-- Profile Picture and Name -->
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-24 h-24 rounded-full object-cover shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition-colors duration-300">
        <span class="absolute bottom-0 right-0 w-6 h-6 bg-green-400 rounded-full border-2 border-blue-100 dark:border-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark"></span>
      </div>
      <div class="text-center">
        <h2 class="text-2xl font-bold text-blue-900 dark:text-blue-100">Jane Doe</h2>
        <p class="text-blue-700 dark:text-blue-300">@janedoe_official</p>
        <p class="text-sm text-blue-600 dark:text-blue-400 mt-2">UI/UX Designer | Building beautiful experiences.</p>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-3 gap-4 w-full mt-4">
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">1.2k</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Posts</span>
        </div>
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">5.8k</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Followers</span>
        </div>
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">345</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Following</span>
        </div>
      </div>

      <!-- Follow Button Group -->
      <div class="flex flex-col md:flex-row gap-4 w-full mt-5">
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-gradient-to-br from-blue-500 to-blue-700 text-white
                       hover:from-blue-600 hover:to-blue-800
                       shadow-neumorphic-blue dark:shadow-neumorphic-dark-blue
                       active:shadow-neumorphic-blue-inset dark:active:shadow-neumorphic-dark-blue-inset
                       transition-all duration-200 ease-in-out
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
                       dark:text-blue-100">
          Follow
        </button>
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-blue-100 dark:bg-gray-800 text-blue-800 dark:text-blue-200
                       shadow-neumorphic-light dark:shadow-neumorphic-dark
                       hover:bg-blue-200 dark:hover:bg-gray-700
                       active:shadow-neumorphic-light-inset dark:active:shadow-neumorphic-dark-inset
                       transition-all duration-200 ease-in-out
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
                       dark:hover:text-blue-100">
          Message
        </button>
      </div>

      <!-- Social Icons -->
      <div class="flex justify-center space-x-6 mt-6 w-full">
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.23 6.09c.01.59.01 1.18 0 1.77 0 5.43-4.14 11.66-11.67 11.66A11.68 11.68 0 010 19.34c1.61.18 3.23-.27 4.67-1.35.03.02.05.04.08.06A8.25 8.25 0 0010.5 17c-2.45-.4-4.5-1.63-5.97-3.69-.1-.1-.13-.2-.17-.3A.32.32 0 014 12.82c.04.01.07.03.1.04.57.24 1.18.39 1.8.46-1.92-1.3-3.19-3.52-3.19-6.09 0-1.34.37-2.6.98-3.77A8.34 8.34 0 0010.5 9.4c-.05-1.5-.77-2.88-1.95-3.87.5-.1 1-.16 1.5-.16A8.24 8.24 0 0117.84 8.3c1.78-.57 3.42-1.6 4.79-2.9v-.01zM10.5 2C5.83 2 2 5.8 2 10.5c0 3.73 2.45 6.94 5.82 8.37A10.12 10.12 0 0010.5 20c5.79 0 10.5-4.71 10.5-10.5S16.29 2 10.5 2zm6.27 4.28c-.01.02-.02.04-.04.05.02-.01.03-.03.04-.05z"></path>
          </svg>
        </a>
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.24 20.3c-.09.02-.19.03-.29.04a2.91 2.91 0 01-1.89-.66c-.34-.23-.62-.51-.83-.84l-.11-.18A.75.75 0 009 18.23l-.1-.08c-.16-.14-.29-.28-.39-.42-.08-.12-.13-.23-.16-.33l-.04-.13a.75.75 0 00-.73-.55h-.01a.75.75 0 00-.63.29c-.06.07-.12.16-.16.27-.05.11-.08.23-.08.36 0 .1.01.2.02.29.02.1.04.2.07.29.03.09.07.17.11.26.04.09.09.18.15.26.06.09.13.17.2.25.07.09.15.16.23.23l.11.1c.09.08.18.15.28.22.1.07.2.13.31.18.06.03.12.06.19.08.08.02.16.03.24.03.05 0 .1-.01.15-.02.05-.01.09-.02.14-.03.04-.01.08-.02.1-.03l.03-.01v-.01a.15.15 0 01.03-.02l.02-.01a.75.75 0 00.32-.98.75.75 0 00-.98-.32l-.02.01-.03.02a.15.15 0 01-.03.02l-.1.05-.18.06-.29-.1c-.1-.04-.19-.09-.28-.15-.08-.07-.16-.15-.22-.24-.07-.1-.13-.2-.17-.3-.05-.1-.08-.2-.11-.3-.02-.08-.03-.17-.03-.26 0-.27.1-.5.3-.65.2-.16.48-.25.75-.25.21 0 .4.07.57.18.17.11.3.26.4.45.06.11.1.23.14.36.03.12.05.25.05.38 0 .22-.04.42-.12.6-.08.19-.19.35-.33.5-.09.09-.19.16-.3.21-.08.03-.16.05-.24.05-.04 0-.08-.01-.12-.02-.04-.01-.07-.02-.1-.04a.75.75 0 00-.9-.57.75.75 0 00-.57.9c.07.16.14.3.24.43.09.12.2.24.32.34.12.1.25.18.39.24.13.06.28.1.42.11.16.02.32.02.49.02.31 0 .6-.04.88-.13.28-.09.53-.22.75-.4.22-.17.4-.39.54-.64.14-.25.24-.53.29-.83.05-.3.07-.63.07-.98 0-.31-.03-.62-.09-.92-.06-.3-.15-.59-.26-.87-.11-.29-.25-.56-.41-.81-.17-.25-.36-.48-.58-.69-.21-.21-.45-.4-.7-.57-.26-.17-.54-.3-.84-.4-.3-.1-.63-.15-.97-.15-.31 0-.6.04-.88.13-.28.09-.53.22-.75.4-.22.17-.4.39-.54.64-.14.25-.24.53-.29.83-.05.3-.07.63-.07.98 0 .31.03.62.09.92.06.3.15.59.26.87.11.29.25.56.41.81.17.25.36.48.58.69.21.21.45.4.7.57.26.17.54.3.84.4.3.1.63.15.97.15zM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Custom Tailwind CSS Configuration for Neumorphism -->
    <style>
      .shadow-neumorphic-light {
        box-shadow: 6px 6px 12px #98b7e0, -6px -6px 12px #d2f7ff;
      }
      .dark .shadow-neumorphic-dark {
        box-shadow: 6px 6px 12px #181c2d, -6px -6px 12px #444c68;
      }
      .shadow-neumorphic-light-inset {
        box-shadow: inset 4px 4px 8px #98b7e0, inset -4px -4px 8px #d2f7ff;
      }
      .dark .shadow-neumorphic-dark-inset {
        box-shadow: inset 4px 4px 8px #181c2d, inset -4px -4px 8px #444c68;
      }
      .shadow-neumorphic-light-sm {
        box-shadow: 3px 3px 6px #a8cce6, -3px -3px 6px #c4ecff;
      }
      .dark .shadow-neumorphic-dark-sm {
        box-shadow: 3px 3px 6px #1c2134, -3px -3px 6px #3a415b;
      }
      .shadow-neumorphic-blue {
        box-shadow: 8px 8px 16px #0a5697, -8px -8px 16px #1072c4;
      }
      .dark .shadow-neumorphic-dark-blue {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(100,100,100,0.2);
      }
      .shadow-neumorphic-blue-inset {
        box-shadow: inset 5px 5px 10px #0a5697, inset -5px -5px 10px #1072c4;
      }
      .dark .shadow-neumorphic-dark-blue-inset {
        box-shadow: inset 5px 5px 10px rgba(0,0,0,0.6), inset -5px -5px 10px rgba(100,100,100,0.3);
      }
    </style>
  </div>
</div>

Composant Suivre le bouton

Un composant complexe de bouton « Suivre » avec des micro-interactions, une palette de couleurs sépia/marron, un design réactif et une prise en charge du mode sombre, adapté aux plateformes de blog/contenu.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs w-full bg-amber-100 dark:bg-stone-800 rounded-xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="relative h-24 bg-gradient-to-r from-amber-300 to-amber-500 dark:from-stone-700 dark:to-stone-900">
      <img class="absolute inset-0 w-full h-full object-cover opacity-70" src="https://picsum.photos/400/200?random=1" alt="Background">
    </div>
    <div class="relative px-4 pb-4 -mt-12 text-center">
      <div class="relative inline-block border-4 border-amber-100 dark:border-stone-800 rounded-full overflow-hidden shadow-lg transition-all duration-300 hover:scale-105">
        <img class="w-24 h-24 object-cover object-center" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Avatar">
      </div>
      <h3 class="mt-3 text-lg font-semibold text-amber-900 dark:text-amber-100">Jane Doe</h3>
      <p class="text-sm text-amber-700 dark:text-stone-300">@janedoe_writes</p>
      <p class="mt-2 text-sm text-amber-800 dark:text-stone-400 leading-snug">Passionate storyteller, weaving tales of adventure and discovery. Follow along for daily insights!</p>

      <div class="mt-5 flex justify-center space-x-3">
        <div class="relative group">
          <button class="peer group relative flex items-center justify-center px-5 py-2 text-base font-medium text-amber-50 dark:text-amber-100 bg-amber-600 dark:bg-stone-700 rounded-full shadow-md hover:bg-amber-700 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800 transform transition-all duration-200 ease-in-out active:scale-95 overflow-hidden has-[input:checked]:bg-amber-800 dark:has-[input:checked]:bg-stone-900 has-[input:checked]:ring-amber-700 has-[input:checked]:shadow-inner">
            <input type="checkbox" id="follow-toggle" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer peer" aria-label="Toggle Follow">
            <span class="relative z-10 block transition-transform duration-300 ease-in-out peer-checked:-translate-y-full peer-checked:opacity-0">Follow</span>
            <span class="relative z-10 block absolute top-full left-0 w-full transition-transform duration-300 ease-in-out peer-checked:translate-y-0 peer-checked:opacity-100 opacity-0">Following</span>
            <svg class="absolute z-10 w-5 h-5 left-1/2 top-1/2 -ml-2.5 -mt-2.5 text-amber-50 dark:text-amber-100 transition-all duration-300 ease-in-out transform scale-0 opacity-0 peer-checked:scale-100 peer-checked:opacity-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-amber-800 dark:bg-stone-900 text-amber-50 dark:text-stone-200 text-xs rounded-lg shadow-lg opacity-0 pointer-events-none group-hover:opacity-100 group-hover:-translate-y-full transition-all duration-300">
            Click to follow!
            <div class="absolute left-1/2 translate-x-[-50%] top-full w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-amber-800 dark:border-t-stone-900"></div>
          </div>
        </div>

        <button class="group relative px-4 py-2 text-base text-amber-800 dark:text-amber-100 bg-amber-200 dark:bg-stone-700 rounded-full shadow-md hover:bg-amber-300 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-800 transform transition-all duration-200 ease-in-out active:scale-95 overflow-hidden">
          <span class="relative z-10">Message</span>
          <div class="absolute inset-0 bg-amber-400 dark:bg-stone-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
        </button>
      </div>

      <div class="mt-6 flex justify-around text-center border-t border-amber-200 dark:border-stone-700 pt-4">
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">2.5K</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Followers</p>
        </div>
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">1.2K</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Following</p>
        </div>
        <div>
          <p class="font-semibold text-lg text-amber-900 dark:text-amber-100">45</p>
          <p class="text-xs text-amber-700 dark:text-stone-400">Posts</p>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Suivre le bouton - Monospace/Style de développeur

Un composant de bouton de suivi complexe et interactif conçu pour les sites Web d’actualités/journalisme, avec une esthétique monospace/développeur avec des couleurs aux tons de bijou et une réactivité totale, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-mono antialiased p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-950 text-gray-800 dark:text-gray-200 transition-colors duration-300">
  <div class="max-w-md mx-auto bg-white dark:bg-zinc-900 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800">
    <div class="flex items-center p-4 sm:p-6 border-b border-gray-200 dark:border-zinc-800">
      <div class="flex-shrink-0">
        <img class="h-16 w-16 sm:h-20 sm:w-20 rounded-full object-cover border-2 border-emerald-500 dark:border-emerald-600 ring-2 ring-emerald-300 dark:ring-emerald-800" src="https://randomuser.me/api/portraits/women/15.jpg" alt="Developer Profile Picture">
      </div>
      <div class="ml-4 flex-grow">
        <h2 class="text-xl sm:text-2xl font-bold dark:text-emerald-400">@DevJournalist_AI</h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1 hidden sm:block">Code Editor & Story Teller</p>
        <div class="flex items-center space-x-2 mt-2">
          <span class="px-2 py-1 bg-emerald-100 dark:bg-emerald-900 text-emerald-700 dark:text-emerald-300 text-xs font-semibold rounded-full">Verified</span>
          <span class="px-2 py-1 bg-violet-100 dark:bg-violet-900 text-violet-700 dark:text-violet-300 text-xs font-semibold rounded-full">News</span>
        </div>
      </div>
      <div class="flex flex-col items-end">
        <button class="follow-button px-5 py-2 sm:px-6 sm:py-2.5 rounded-full text-white font-semibold transition-all duration-300 flex items-center justify-center
          bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-700 dark:hover:bg-emerald-600
          focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800
          data-[followed='true']:bg-gray-300 data-[followed='true']:hover:bg-gray-400 data-[followed='true']:dark:bg-zinc-700 data-[followed='true']:dark:hover:bg-zinc-600
          data-[followed='true']:text-gray-800 data-[followed='true']:dark:text-gray-200
          data-[followed='true']:focus:ring-gray-200 data-[followed='true']:dark:focus:ring-zinc-600"
          onclick="this.dataset.followed = (this.dataset.followed === 'true' ? 'false' : 'true');
                   this.innerHTML = (this.dataset.followed === 'true' ? '&check; Followed' : '+ Follow');"
          data-followed="false">
          + Follow
        </button>
        <span class="text-xs text-gray-500 dark:text-gray-400 mt-2 text-right" id="follower-count">12.5k Followers</span>
      </div>
    </div>
    <div class="p-4 sm:p-6 text-sm text-gray-700 dark:text-gray-300">
      <p class="mb-2"><span class="text-emerald-500 dark:text-emerald-400">// Latest Commit:</span> Unpacking the future of AI in journalism. Stay updated on cutting-edge tech and ethical reporting.</p>
      <p class="mb-2"><span class="text-violet-500 dark:text-violet-400">// Repository Status:</span> Constantly fetching new insights from the global newsfeed. Expect bug fixes and feature updates on your understanding of complex issues.</p>
      <p class="text-ruby-500 dark:text-ruby-400"><span class="text-red-500 dark:text-red-400">// System Log:</span> Ping us for collabs or data-driven story discussions. Our DMs are open for secure connections.</p>
    </div>
    <div class="p-4 sm:p-6 border-t border-gray-200 dark:border-zinc-800 flex flex-wrap gap-2 text-xs">
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#TechJournalism</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#DataScience</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#AIethics</span>
      <span class="px-3 py-1 bg-gray-100 dark:bg-zinc-800 rounded-md text-gray-700 dark:text-gray-300 border border-gray-200 dark:border-zinc-700">#FutureOfNews</span>
    </div>
  </div>
</div>

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 Aperçu

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

Composant Suivre le bouton

Un composant de bouton de suivi/désabonnement réactif adapté aux sites Web d’événements et de conférences, avec des transitions de dégradé, la prise en charge du mode sombre et une couleur d’accentuation vive. Il comprend un effet de survol subtil et modifie le texte et l’arrière-plan au clic (simulé).

Ouvrir Aperçu

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="follow-button group relative overflow-hidden px-6 py-2 rounded-full font-semibold text-lg transition-all duration-300 ease-out shadow-md
    bg-gradient-to-r from-red-500 to-purple-600 
    hover:from-purple-600 hover:to-red-500 
    text-white dark:text-gray-100
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-red-800">
    <span class="relative z-10 block transition-transform duration-300 ease-in-out group-hover:scale-105" data-text-initial="Follow" data-text-followed="Following">Follow</span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-10 pointer-events-none"></span>
  </button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.querySelector('.follow-button');
      const buttonText = button.querySelector('span[data-text-initial]');

      let isFollowing = false;

      button.addEventListener('click', () => {
        isFollowing = !isFollowing;

        if (isFollowing) {
          buttonText.textContent = buttonText.dataset.textFollowed;
          button.classList.remove('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500');
          button.classList.add('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.remove('text-white', 'dark:text-gray-100');
        } else {
          buttonText.textContent = buttonText.dataset.textInitial;
          button.classList.remove('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.add('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500',
          'text-white', 'dark:text-gray-100');
        }
      });
    });
  </script>
</div>

Composant Suivre le bouton

Un bouton « Suivre » épuré et minimaliste conçu avec une palette de couleurs rétro/vintage, adapté à un tableau de bord ou à une page de profil. Il dispose d’un état de survol interactif et d’une prise en charge du mode sombre, incarnant les principes de la typographie suisse et internationale.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
  <div class="flex flex-col items-center space-y-4">
    <img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div class="text-center">
      <p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
      <p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
    </div>
    <button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
                   hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
                   dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
                   transition duration-300 ease-in-out">
      Follow
    </button>
  </div>
</div>

Composant Suivre le bouton

Il s’agit d’un composant de bouton de suivi complexe, inspiré du papier/de l’impression, pour les sites Web de jeux, doté d’un design monochrome en noir et blanc avec une couleur d’accent vive, optimisé pour la réactivité et le mode sombre.

Ouvrir Aperçu

                <div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="relative bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border-4 border-gray-200 dark:border-gray-700 max-w-sm w-full transform rotate-1 transition-all duration-300 hover:rotate-0">
    <!-- Paper Fold Top Left -->
    <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-bl-lg border-b border-r border-gray-200 dark:border-gray-700 -translate-x-1/2 -translate-y-1/2 rotate-45 transform origin-bottom-right"></div>
    <!-- Paper Fold Bottom Right -->
    <div class="absolute bottom-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-tl from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-tr-lg border-t border-l border-gray-200 dark:border-gray-700 translate-x-1/2 translate-y-1/2 -rotate-45 transform origin-top-left"></div>

    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="Gamer Avatar" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-lime-500 dark:border-lime-400 mx-auto mb-4 object-cover shadow-md transform -rotate-2">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 relative inline-block before:block before:absolute before:-inset-1 before:bg-gradient-to-r before:from-lime-500 before:to-yellow-400 before:skew-y-3 before:rounded-sm z-0">
        <span class="relative text-white dark:text-gray-900">CyberNinja_XP</span>
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium">Pro Gamer | Streamer | Level 99</p>
    </div>

    <div class="flex justify-around items-center mb-6 border-t border-b border-dashed border-gray-300 dark:border-gray-600 py-3">
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">1.2M</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">500</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">12,345</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Subscribers</p>
      </div>
    </div>

    <div class="flex flex-col space-y-3">
      <button class="w-full py-3 px-4 rounded-lg bg-lime-500 text-white dark:bg-lime-600 dark:text-gray-900 font-bold text-lg uppercase tracking-wider shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 active:scale-95 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-700 dark:border-lime-900 relative group overflow-hidden">
        <span class="absolute inset-0 bg-white/20 dark:bg-black/20 transform -skew-x-12 opacity-0 group-hover:opacity-100 transition-all duration-300"></span>
        <span class="relative z-10">Follow Now</span>
      </button>
      <button class="w-full py-3 px-4 rounded-lg bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 font-semibold text-base uppercase tracking-wide hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border-b-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
        View Profile
      </button>
    </div>

    <div class="mt-6 text-xs text-gray-400 dark:text-gray-500 text-center uppercase tracking-wider relative">
      <span class="absolute left-0 right-0 top-1/2 h-px bg-gray-300 dark:bg-gray-600 transform -translate-y-1/2"></span>
      <span class="relative z-10 bg-white dark:bg-gray-800 px-2 rotate-1">Player ID: #G4M3R_PR0</span>
    </div>
  </div>
</div>