添加到购物车按钮

响应式“添加到购物车”按钮，具有拟物化设计、单色配色方案和深色主题支持。

预览

HTML 代码

<button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-xl hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 ease-in-out hover:scale-105">
  Add to Cart
</button>

相关组件

添加到购物车按钮

一个简单的大地色系添加到购物车按钮，具有微交互启发的悬停效果，具有响应式设计和深色模式支持。

打开

添加到购物车按钮组件

一个复杂的添加到购物车按钮，设计具有复古/复古美学和互补配色方案，适用于专业公司网站。此组件支持深色模式，并且是响应式的，利用 Tailwind CSS 进行样式设置。

打开

添加到购物车 Glassmorphism 大地色调按钮

一个简单的“添加到购物车”按钮，采用玻璃形态风格设计，使用大地色调，适用于以天气/气候为主题的应用。它是完全响应的，并支持深色模式。

打开