组件 Follow 按钮 关注按钮组件

关注按钮组件

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

预览

HTML 代码

<div class="flex flex-col items-center justify-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <img class="mb-4 rounded-full border-4 border-black dark:border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" width="100" height="100">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-2">Follow Us</h2>
    <p class="text-gray-700 dark:text-gray-300 text-center mb-4">Join our community and stay updated with our latest content!</p>
    <a href="#" class="px-4 py-2 text-lg font-bold text-white bg-black dark:bg-white dark:text-black border-4 border-black dark:border-white hover:bg-gray-600 dark:hover:bg-gray-300 transition-all duration-300">Follow</a>
</div>

相关组件

关注按钮

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

打开

关注按钮组件

一个响应式的关注按钮组件,采用Material Design原则设计,支持暗模式,并使用Tailwind CSS进行定制样式。

打开

Follow Button 组件

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

打开