Composants Bouton Suivre 3D_Analogous_Simple_Follow_Button_Component

3D_Analogous_Simple_Follow_Button_Component

Un bouton « Suivre » simple et réactif avec une esthétique 3D et une palette de couleurs analogue, adapté à un site de portfolio, prenant en charge les modes clair et sombre.

Aperçu

HTML Code

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="relative group w-32 h-12 rounded-lg overflow-hidden font-semibold transition-all duration-300 ease-in-out
                     bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
                     text-white shadow-lg dark:shadow-xl
                     active:translate-y-0.5 active:shadow-sm
                     hover:from-indigo-600 hover:to-purple-700 dark:hover:from-indigo-800 dark:hover:to-purple-900">
    
    <!-- Front face of the button -->
    <div class="absolute inset-0 flex items-center justify-center
                bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-700 dark:to-purple-800
                rounded-lg
                transition-all duration-300 ease-in-out
                group-hover:opacity-0 group-hover:translate-y-full
                group-active:translate-y-0.5 group-active:shadow-sm">
      Follow
    </div>

    <!-- Back face (pressed state) / Alternative state -->
    <div class="absolute inset-0 flex items-center justify-center
                bg-gradient-to-br from-purple-600 to-pink-500 dark:from-purple-800 dark:to-pink-700
                rounded-lg
                transition-all duration-300 ease-in-out
                origin-top
                group-hover:translate-y-0 group-hover:opacity-100 group-hover:scale-y-1
                -translate-y-full opacity-0 scale-y-0
                transform-gpu
                z-10">
      Following!
    </div>

    <!-- Shadow/Depth effect -->
    <div class="absolute inset-x-2 bottom-0 h-2 bg-gradient-to-br from-indigo-700 to-purple-800 dark:from-indigo-900 dark:to-purple-900 rounded-b-lg
                filter blur-sm opacity-70 transition-all duration-300 ease-in-out
                group-hover:h-0 group-hover:opacity-0
                group-active:h-0 group-active:opacity-0"></div>

  </button>
</div>

Composants associés

Composant du bouton de suivi cyberpunk

Il s’agit d’un composant de bouton « Suivre » complexe, sur le thème du cyberpunk, pour les outils CRM/professionnels, avec une palette de couleurs forêt/vert, des arrière-plans sombres et des accents néon brillants, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir

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

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