组件 Follow 按钮 关注按钮组件

关注按钮组件

一个采用材料设计风格的响应式关注按钮组件,使用 Tailwind CSS 并支持深色模式。

预览

HTML 代码

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
    <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
        <img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Software Developer</p>
        <button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
            <span>Follow</span>
        </button>
    </div>
</div>

相关组件

关注按钮组件

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

打开

Follow Button 组件

适用于活动和会议网站的响应式关注/取消关注按钮组件,具有渐变过渡、深色模式支持和明亮的强调色。它包括微妙的悬停效果,并在单击时更改文本和背景(模拟)。

打开

Follow Button 组件

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

打开