组件 添加到购物车按钮 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>

相关组件

添加到购物车按钮组件 46

一个复古/老式的“添加到购物车”按钮组件,使用Tailwind CSS设计,具有响应式设计和支持暗主题。

打开

添加到购物车按钮

一个具有响应效果和暗黑主题支持的拟物化添加到购物车按钮。

打开

添加到购物车按钮组件

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

打开