加入购物车按钮

一个3D设计的添加到购物车按钮组件,具有响应式效果和深色主题支持,使用 Tailwind CSS。

预览

HTML 代码

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
            <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
            <span class="relative z-10">Add to Cart</span>
        </button>
        <div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
    </div>
</div>

相关组件

添加到购物车按钮组件

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

打开

加入购物车按钮组件

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

打开

添加到购物车 Glassmorphism 大地色调按钮

一个简单的“添加到购物车”按钮,采用玻璃形态风格设计,使用大地色调,适用于以天气/气候为主题的应用。它是完全响应的,并支持深色模式。

打开