组件 Follow 按钮 Follow Button 组件

Follow Button 组件

一个干净、简约的“跟随”按钮,采用复古/复古调色板设计,适用于仪表板或个人资料页面。它具有交互式悬停状态和深色模式支持,体现了瑞士/国际排版原则。

预览

HTML 代码

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

相关组件

Glassmorphism_Music_Follow_Button_Component

专为音乐和音频平台设计的复杂单色玻璃形态跟随按钮组件,具有磨砂玻璃状半透明元素,具有模糊效果,完全响应并支持暗模式。

打开

3D_Analogous_Simple_Follow_Button_Component

一个简单、响应迅速的“关注”按钮,具有 3D 美学和类似的配色方案,适用于作品集网站,支持浅色和深色模式。

打开

关注按钮组件

一个具有神经形态设计的关注按钮,适用于支持深色主题的仪表板。

打开