加入购物车按钮

添加到购物车按钮组件

一个复杂的添加到购物车按钮，设计具有复古/复古美学和互补配色方案，适用于专业公司网站。此组件支持深色模式，并且是响应式的，利用 Tailwind CSS 进行样式设置。

                <div class="flex items-center justify-center p-5 bg-gradient-to-r from-pink-500 to-yellow-500 rounded-lg transition duration-300 ease-in-out hover:scale-105 dark:from-pink-800 dark:to-yellow-700">  <img src="https://picsum.photos/40/40" alt="Product Image" class="rounded">  <div class="ml-4">    <h2 class="text-lg font-bold text-gray-900 dark:text-gray-100">Product Title</h2>    <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product.</p>  </div>  <button class="ml-auto bg-blue-500 text-white font-semibold py-2 px-4 rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Add to Cart</button>  <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="ml-4 h-10 w-10 rounded-full border-2 border-blue-500 dark:border-blue-700"> </div>

Glassmorphism 添加到购物车按钮

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

打开预览

                <button class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-gray-200 border-opacity-10 text-gray-800 px-6 py-3 rounded-md font-semibold transition duration-300 ease-in-out hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-20 dark:text-white dark:hover:bg-opacity-40 dark:focus:ring-gray-700 dark:focus:ring-opacity-50"> Add to Cart </button>

添加到购物车按钮

粗野主义风格的 Add to Cart 按钮，具有鲜艳的色彩和深色模式支持。

打开预览

                <button class="bg-red-600 dark:bg-purple-600 text-white dark:text-black font-bold py-2 px-4 rounded border-4 border-black dark:border-white hover:bg-red-700 dark:hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white transition duration-300 ease-in-out">
  Add to Cart
</button>

添加到购物车按钮组件

响应式 Add to Cart Button 组件，采用粗野主义风格设计，色彩鲜艳，适用于支持深色主题的社交媒体界面。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
        <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
        <p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
        <div class="mt-5">
            <button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
                Add to Cart
            </button>
        </div>
        <div class="mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400"> 
        </div>
    </div>
</div>

添加到购物车按钮

响应式“添加到购物车”按钮，具有拟物化设计、单色配色方案和深色主题支持。

打开预览

                <button class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded-full shadow-lg dark:shadow-xl hover:bg-gray-400 dark:hover:bg-gray-600 transform transition duration-300 ease-in-out hover:scale-105">
  Add to Cart
</button>

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

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

打开预览

                <button class="bg-pink-300 dark:bg-purple-700 text-gray-900 dark:text-gray-100 font-bold py-3 px-6 rounded-none border-4 border-black dark:border-white hover:bg-yellow-300 dark:hover:bg-yellow-600 hover:text-black dark:hover:text-white transition duration-300 ease-in-out shadow-lg dark:shadow-xl text-xl md:text-2xl">Add to Cart</button>

加入购物车按钮组件

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

打开预览

                <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>

复古添加到购物车按钮

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

打开预览

                <button class="add-to-cart-button bg-teal-500 text-white py-2 px-4 rounded-lg border-2 border-pink-600 font-bold uppercase text-lg tracking-wider shadow-lg transform transition duration-300 hover:scale-105 hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-opacity-50 dark:bg-teal-700 dark:border-pink-400 dark:hover:bg-teal-800 dark:focus:ring-pink-400">
  Add to Cart
</button>

添加到购物车按钮组件

一个 3D 样式的 Add to Cart 按钮组件，具有鲜艳的色彩、响应式设计和使用 Tailwind CSS 的深色主题支持。

打开预览

                <div class="flex justify-center items-center p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
        <div class="flex justify-between items-center mb-4">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
            <div class="ml-4">
                <h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
                <p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
        <button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

添加到购物车按钮组件

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

打开预览

                <div class="flex items-center justify-center p-4">
    <div class="relative group">
        <button class="relative z-10 block rounded-lg bg-blue-500 p-4 text-white text-lg font-semibold shadow-md transition-transform transform-gpu hover:scale-105 focus:outline-none dark:bg-blue-700">
            <span>Add to Cart</span>
            <span class="absolute top-0 left-0 w-full h-full bg-yellow-400 rounded-lg opacity-0 group-hover:opacity-40 transition-opacity duration-300"></span>
        </button>
        <div class="absolute -bottom-3 -right-3 w-12 h-12 rounded-full bg-red-500 shadow-lg flex items-center justify-center transform rotate-45 transition-transform duration-300 group-hover:scale-110">
            <img src="https://picsum.photos/40" alt="Product Image" class="rounded-full">
        </div>
        <div class="absolute -bottom-16 -left-16 w-10 h-10 rounded-full bg-green-500 shadow-lg">
            <img src="https://picsum.photos/30" alt="Decorative Element" class="rounded-full">
        </div>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-blue-500 { background-color: #3b82f6; }
        .bg-blue-700 { background-color: #1d4ed8; }
        .bg-yellow-400 { background-color: #f59e0b; }
        .bg-red-500 { background-color: #ef4444; }
        .bg-green-500 { background-color: #22c55e; }
        .text-white { color: #ffffff; }
    }
</style>

类别