添加产品到购物车的按钮
响应式“添加到购物车”按钮,具有拟物化设计、单色配色方案和深色主题支持。
<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>
一个复古/怀旧风格的“添加到购物车”按钮组件,适用于电子商务应用。这款按钮的设计灵感来自80年代和90年代,使用了相似的色彩方案,并具有互动效果。它是响应式的,支持深色主题。
<div class="flex flex-col items-center"> <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700"> <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" /> <div class="mt-2 flex flex-col items-center"> <p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p> <span class="text-yellow-200 dark:text-yellow-300">$19.99</span> <button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700"> <span class="flex items-center justify-center"> <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" /> Add to Cart </span> </button> </div> </div> </div>
一个响应式的添加到购物车按钮组件,采用拟物化元素,生动的色彩,并支持深色主题,适合博客和内容消费目的。
<div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition duration-300"> <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-32 rounded-lg shadow-md mb-4"> <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Special Product</h2> <p class="text-gray-600 dark:text-gray-400 mb-4">This is a great product for your reading material. Click the button below to add it to your cart!</p> <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold py-2 px-4 border rounded-lg hover:scale-105 transform transition duration-300 ease-in-out shadow-lg"> <span class="flex items-center justify-center"> <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2"> Add to Cart </span> </button> </div>
具有极简/平面设计、灰度色彩方案、复杂复杂程度的购物车按钮组件,适用于仪表板,具有响应式设计和黑暗主题支持。
<button class="flex items-center justify-center w-40 h-10 bg-gray-800 text-white rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 dark:focus:ring-gray-400"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg> Add to Cart </button>
一个响应式的添加到购物车按钮组件,采用拟物风格设计,具有鲜艳的色彩和黑暗主题支持,适用于社交媒体界面.
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900"> <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80"> <img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" /> <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2> <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p> <div class="flex items-center justify-between w-full mt-4"> <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105"> Add to Cart </button> </div> <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center"> <img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" /> </div> </div> </div>