组件 Follow 按钮 关注按钮组件

关注按钮组件

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

预览

HTML 代码

<div class="flex justify-center items-center h-screen bg-gray-800 dark:bg-gray-900">
    <button class="relative inline-flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg transition-transform transform hover:scale-105 active:scale-95 dark:shadow-inner shadow-gray-300 ">
        <span class="absolute inset-0 rounded-full bg-gradient-to-r from-pink-400 via-red-500 to-yellow-500 opacity-20 blur transition-all duration-500"></span>
        <span class="relative text-white font-bold text-lg">
            Follow
        </span>
    </button>
</div>

相关组件

Follow Button 组件

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

打开

跟随按钮

黑暗模式 UI 关注按钮组件,具有响应式效果和黑暗主题支持。

打开

玻璃态关注按钮

一个具有玻璃风格设计的响应式关注按钮,支持暗黑模式,使用Tailwind CSS.

打开