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

添加到购物车按钮

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

预览

HTML 代码

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
        <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        </div>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
            Add to Cart
        </button>
    </div>
</div>

相关组件

添加到购物车按钮组件

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

打开

添加到购物车按钮组件

一个使用 Tailwind CSS 设计的响应式“添加到购物车”按钮,采用深色模式,具有悬停效果和深色主题支持。

打开

复古添加到购物车按钮

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

打开