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

添加到购物车按钮

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

预览

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>

相关组件

添加到购物车按钮组件

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

打开

添加到购物车按钮

一个简单的大地色系添加到购物车按钮,具有微交互启发的悬停效果,具有响应式设计和深色模式支持。

打开

Organic_Nature_Add_To_Cart_Button

一个有机/自然风格的“添加到购物车”按钮组件,具有互补的配色方案,适用于教育平台。具有流畅的线条、微妙的交互元素、完全响应能力和深色模式支持。

打开