组件 添加到购物车按钮 复古添加到购物车按钮

复古添加到购物车按钮

响应式“添加到购物车”按钮,具有复古/复古设计、互补配色方案和适度的复杂性,适用于仪表板目的。支持深色模式。

预览

HTML 代码

<button class="add-to-cart-button bg-teal-500 text-white py-2 px-4 rounded-lg border-2 border-pink-600 font-bold uppercase text-lg tracking-wider shadow-lg transform transition duration-300 hover:scale-105 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50 dark:bg-teal-700 dark:border-pink-400 dark:hover:bg-teal-800 dark:focus:ring-pink-400">
  Add to Cart
</button>

相关组件

添加到购物车按钮

一个采用材料设计原则、使用 Tailwind CSS 样式的响应式添加到购物车按钮,支持暗模式主题。

打开

添加到购物车按钮组件

一个使用 Tailwind CSS 设计的响应式“添加到购物车”按钮,采用深色模式,具有悬停效果和深色主题支持。

打开

加入购物车按钮

一个响应式的添加到购物车按钮组件,采用拟物风格设计,具有鲜艳的色彩和黑暗主题支持,适用于社交媒体界面.

打开