组件 按钮 材料设计按钮组件

材料设计按钮组件

用于社交媒体的土色调材料设计按钮组件

预览

HTML 代码

```html
<div class="flex flex-col items-center justify-center min-h-screen bg-stone-100 dark:bg-stone-900 p-4">
  <div class="flex space-x-4 rtl:space-x-reverse">
    <button class="px-4 py-2 bg-amber-600 text-white dark:bg-amber-700 dark:text-stone-200 rounded-md shadow-md hover:bg-amber-700 dark:hover:bg-amber-800 transition duration-300 ease-in-out">Like</button>
    <button class="px-4 py-2 bg-stone-400 text-stone-800 dark:bg-stone-600 dark:text-stone-200 rounded-md shadow-md hover:bg-stone-500 dark:hover:bg-stone-700 transition duration-300 ease-in-out">Comment</button>
    <button class="px-4 py-2 bg-green-600 text-white dark:bg-green-700 dark:text-stone-200 rounded-md shadow-md hover:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out">Share</button>
  </div>
</div>
```

相关组件

按钮组件

一个具有关联相似设计的复杂仪表板按钮组件,具有响应式设计和深色主题支持。

打开

玻璃态按钮组件

使用大地色调的玻璃主义按钮,适用于具有暗模式的响应式作品集网站。

打开

按钮组件

具有单色配色方案的 Neumorphism 按钮组件,适用于作品集,响应式支持深色主题。

打开