组件 点赞/反应按钮 喜欢/反应按钮组件

喜欢/反应按钮组件

一个响应式点赞/反应按钮组件,考虑到微交互,采用单色配色方案,适合博客和内容消费,并支持深色主题。

预览

HTML 代码

<div class="flex flex-col items-center p-4 space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md shadow-md">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Engage with this post!</h2>
    <div class="flex space-x-4">
        <button class="relative group p-2 rounded-full text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Like" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Like</span>
        </button>
        <button class="relative group p-2 rounded-full text-green-600 dark:text-green-300 hover:bg-green-100 dark:hover:bg-green-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Love" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Love</span>
        </button>
        <button class="relative group p-2 rounded-full text-red-600 dark:text-red-300 hover:bg-red-100 dark:hover:bg-red-600 transition duration-300 ease-in-out">
            <img src="https://picsum.photos/35/35" alt="Angry" class="rounded-full">
            <span class="absolute bottom-full left-1/2 transform -translate-x-1/2 -translate-y-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">Angry</span>
        </button>
    </div>
    <p class="text-sm text-gray-600 dark:text-gray-400">Your reactions help us improve!</p>
</div>

相关组件

拟物化反应按钮

一组具有拟物设计风格的点赞和反应按钮,支持响应式布局和暗模式。这些按钮完全使用HTML和Tailwind CSS实现,无需JavaScript。暗模式通过CSS类处理。占位符图像用于头像。

打开

点赞/反应按钮组件

一组复杂、简约的反应按钮,适用于音乐/音频平台,具有鲜艳的色彩、深色模式支持和完全响应能力。

打开

Art Deco Like/Reaction 按钮组件

一组简单、响应迅速的点赞/反应按钮,具有装饰艺术风格的美感,适用于运动/健身应用。具有暖色中性色和暗模式支持。

打开