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

复古添加到购物车按钮

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

预览

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,具有高对比度、不寻常的布局、响应效果和暗主题支持。

打开

加入购物车按钮

一个3D设计的添加到购物车按钮组件,具有响应式效果和深色主题支持,使用 Tailwind CSS。

打开

添加到购物车按钮组件

一个受自然启发的糖果色“添加到购物车”按钮组件,专为论坛/社区平台设计,具有流畅、有机的风格。它响应式并支持深色模式。

打开