组件 Follow 按钮 带微交互的关注按钮

带微交互的关注按钮

一个响应式的关注按钮组件,支持深色主题和微交互,专为使用Tailwind CSS的社交媒体应用设计。具有单色配色方案和复杂的互动元素。

预览

HTML 代码

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

相关组件

关注按钮组件

一个复杂的响应式关注按钮组件,采用玻璃拟态风格和鲜艳的颜色,专为支持深色模式的商业网站设计,使用 Tailwind CSS.

打开

关注按钮组件

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

打开

关注按钮

一个简单的关注按钮,具有材料设计风格、响应式效果和暗模式支持。

打开