添加到购物车按钮

粗野主义风格的 Add to Cart 按钮，具有鲜艳的色彩和深色模式支持。

预览

HTML 代码

<button class="bg-red-600 dark:bg-purple-600 text-white dark:text-black font-bold py-2 px-4 rounded border-4 border-black dark:border-white hover:bg-red-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white transition duration-300 ease-in-out">
  Add to Cart
</button>

相关组件

加入购物车按钮组件

添加到购物车按钮，专为深色模式 UI 设计，具有大地色调配色方案和复杂复杂度级别，用于投资组合。该组件是响应式的，并使用 Tailwind 的 dark：前缀支持深色主题。

打开

添加到购物车按钮组件

一个为深色模式设计的响应式“添加到购物车”按钮，使用 Tailwind CSS。

打开

复古添加到购物车按钮

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

打开