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

添加到购物车按钮

一个具有响应效果和暗黑主题支持的拟物化添加到购物车按钮。

预览

HTML 代码

<button
  class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
>
  <span class="flex items-center justify-center">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-6 w-6 mr-2"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"
      ></path>
    </svg>
    Add to Cart
  </span>
</button>

相关组件

添加到购物车按钮组件

一个为社交媒体界面设计的3D风格“添加到购物车”按钮组件。它具有丰富的深度界面、引人入胜的设计元素,并且响应式,支持暗黑主题。

打开

Glassmorphism 添加到购物车按钮

添加具有 Glassmorphism 样式、单色配色方案和中等复杂性的购物车按钮。响应式,支持深色模式。

打开

复古添加到购物车按钮

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

打开