3D_Analogous_Simple_Follow_Button_Component

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