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

复古添加到购物车按钮

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

预览

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

打开

添加到购物车按钮组件

响应式 Add to Cart Button 组件,采用粗野主义风格设计,色彩鲜艳,适用于支持深色主题的社交媒体界面。

打开

添加到购物车按钮

一个响应式的添加到购物车按钮组件,采用拟物化元素,生动的色彩,并支持深色主题,适合博客和内容消费目的。

打开