组件 Follow 按钮 玻璃体跟随按钮

玻璃体跟随按钮

用于社交媒体的玻璃拟态关注按钮组件,支持深色主题。

预览

HTML 代码

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
        <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
      </div>
      <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Follow
      </button>
    </div>
  </div>
</div>

相关组件

Follow Button 组件

一个复杂的响应式“跟随”按钮组件,具有渐变和柔和的颜色过渡,专为房地产平台设计。包括深色模式支持并使用语义 HTML。

打开

3D生动关注按钮

一个简单的受3D启发的关注按钮组件,采用鲜艳的颜色,适用于商业网站。它是响应式的,并仅使用HTML和Tailwind CSS支持黑暗主题。

打开

关注按钮组件

一个采用粗犷主义风格设计的关注按钮组件,具有高对比度和原始、粗犷的外观。它是响应式的并支持暗主题。

打开