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

添加到购物车按钮

一个使用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>

相关组件

添加到购物车按钮

一个响应式的添加到购物车按钮组件,采用拟物化元素,生动的色彩,并支持深色主题,适合博客和内容消费目的。

打开

Glassmorphism 添加到购物车按钮

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

打开

粗犷主义粉色添加到购物车按钮

粗野主义风格的 Add to Cart 按钮,具有柔和的配色方案、适度的复杂度和响应式设计,支持深色模式。适用于博客或内容网站。

打开