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

相关组件

Glassmorphism_Music_Follow_Button_Component

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

打开

Follow Button 组件

一个复杂的跟随按钮组件,设计有 glassmorphism 效果,使用互补的配色方案,适用于电子商务应用程序,具有响应式设计和深色主题支持。

打开

复古跟随按钮组件

一个简单、响应迅速的跟随按钮组件,具有复古/复古美学、互补配色方案和游戏用途,包括深色模式支持。

打开