组件 添加到购物车按钮 加入购物车按钮组件

加入购物车按钮组件

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

预览

HTML 代码

<button class="bg-stone-700 hover:bg-stone-600 text-stone-100 py-3 px-6 rounded-lg font-semibold text-lg shadow-lg transition duration-300 ease-in-out dark:bg-stone-800 dark:hover:bg-stone-700 dark:text-stone-200 dark:shadow-xl"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-4-4H8a4 4 0 00-4 4v4m11 0l-3 4m0 0h3v3zm-3-4v1m10-4v2a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h10a2 2 0 012 2z" /> </svg> Add to Cart </button>

相关组件

加入购物车按钮

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

打开

加入购物车按钮组件

一个复古/怀旧风格的“添加到购物车”按钮组件,适用于电子商务应用。这款按钮的设计灵感来自80年代和90年代,使用了相似的色彩方案,并具有互动效果。它是响应式的,支持深色主题。

打开

添加到购物车按钮

一个使用Tailwind CSS设计的拟物化“添加到购物车”按钮组件,具有响应式效果和暗黑主题支持。

打开