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

Glassmorphism 添加到购物车按钮

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

预览

HTML 代码

<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 组件,采用粗野主义风格设计,色彩鲜艳,适用于支持深色主题的社交媒体界面。

打开

Industrial_AddToCartButton

工业风格的“添加到购物车”按钮组件,采用海洋/蓝色调设计,适用于政府/公共服务网站。具有公开的元素、实用的美学、完全响应和暗模式支持。

打开

粗野主义 添加到购物车 按钮

一个简单的野兽派风格的“添加到购物车”按钮组件,具有高对比度、互补色和社交媒体用途。完全响应,支持深色模式。

打开