搜索组件

类别

组件加入购物车按钮

加入购物车按钮

添加产品到购物车的按钮

添加到购物车按钮组件 - Memphis 灰度天气

一个复杂的“添加到购物车”按钮组件，具有 Memphis 设计灵感，使用灰度配色方案，适用于天气/气候产品。功能包括动态图标、加载状态、脉冲动画和项目计数，所有这些都是响应式的，并支持深色模式。此组件旨在为天气数据订阅或气候相关产品提供有趣而实用的行动号召。

打开预览

                <div class="flex items-center justify-center p-4 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
  <div class="relative w-full max-w-sm rounded-[24px] overflow-hidden shadow-xl 
              bg-white dark:bg-neutral-800 
              border-4 border-black dark:border-white
              transform skew-y-3 rotate-1 scale-95 transition-all duration-300 ease-in-out
              hover:skew-y-0 hover:rotate-0 hover:scale-100">
    
    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
      <div class="absolute -top-10 -left-10 w-32 h-32 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
      <div class="absolute -bottom-5 -right-5 w-24 h-24 bg-neutral-700 dark:bg-neutral-300 transform rotate-45"></div>
      <div class="absolute top-1/4 right-1/4 w-16 h-16 bg-neutral-500 dark:bg-neutral-500 transform skew-x-12"></div>
      <div class="absolute bottom-1/3 left-1/3 w-20 h-20 bg-neutral-400 dark:bg-neutral-600 rounded-lg"></div>
    </div>

    <div class="relative z-10 p-6 sm:p-8 flex flex-col items-center justify-center space-y-6">

      <!-- Product Title/Description (Example: Weather Data Package) -->
      <h2 class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-neutral-50 text-center uppercase tracking-wide 
                 transform -skew-x-6 bg-neutral-200 dark:bg-neutral-700 p-2 rounded-lg">
        Premium Climate Insights
      </h2>
      <p class="text-md sm:text-lg text-neutral-700 dark:text-neutral-200 text-center max-w-xs leading-relaxed">
        Unlock 7-day extended forecasts & historical data.
      </p>

      <div class="flex items-center space-x-4 mb-4">
        <!-- Price Display -->
        <span class="text-4xl sm:text-5xl font-extrabold text-neutral-900 dark:text-neutral-50 
                     flex items-center skew-y-2 
                     bg-neutral-300 dark:bg-yellow-500 
                     border-4 border-black dark:border-white
                     px-4 py-2 rounded-xl shadow-lg relative z-10">
          <span class="block transform -rotate-6 relative top-1 text-2xl">$</span>29.99
        </span>
        <!-- Icon for Weather/Climate -->
        <img src="https://raw.githubusercontent.com/twbs/icons/main/icons/cloud-sun-fill.svg" alt="Weather Icon" class="w-16 h-16 sm:w-20 sm:h-20 
             text-neutral-600 dark:text-neutral-300
             filter drop-shadow-lg
             transform rotate-12 transition-transform duration-300 hover:rotate-0 dark:invert">
      </div>

      <!-- Dynamic Add to Cart Button -->
      <button type="button" class="group relative overflow-hidden h-16 w-full rounded-full 
                                  bg-black dark:bg-white
                                  text-white dark:text-black
                                  text-xl sm:text-2xl font-bold uppercase tracking-wider 
                                  flex items-center justify-center 
                                  shadow-xl 
                                  border-4 border-neutral-700 dark:border-neutral-300
                                  transform skew-x-3 transition-transform duration-300 
                                  hover:skew-x-0 hover:scale-105 
                                  focus:outline-none focus:ring-4 focus:ring-neutral-400 dark:focus:ring-neutral-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-800">
        
        <span class="absolute inset-0 bg-neutral-800 dark:bg-neutral-200 transform scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 ease-out z-0"></span>
        
        <!-- Button content -->
        <span class="relative z-10 flex items-center space-x-3 transition-transform duration-300 group-hover:-translate-y-full group-[.added]:translate-x-0 group-[.loading]:translate-x-0">
          <span>Add to Cart</span>
          <svg class="w-7 h-7 fill-current transition-all duration-300 group-hover:rotate-[360deg]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 11H9.83L12.59 8.24L11.17 6.83L7 11L11.17 15.17L12.59 13.76L9.83 11H17V11Z" />
            <path d="M17 12H7V10H17V12Z" class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
          </svg>
        </span>

        <!-- Added state -->
        <span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.added]:translate-y-0">
          <span>Added!</span>
          <svg class="w-7 h-7 fill-current animate-bounce" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6L9 16.2Z"/>
          </svg>
        </span>

        <!-- Loading state -->
        <span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.loading]:translate-y-0">
          <svg class="animate-spin h-7 w-7 text-white dark:text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
          </svg>
          Loading...
        </span>

      </button>

      <!-- Quantity Selector / Item Count -->
      <div class="flex items-center space-x-4 mt-4 text-neutral-800 dark:text-neutral-100">
        <span class="text-lg sm:text-xl font-semibold 
                     transform -rotate-3 leading-none opacity-80
                     bg-neutral-200 dark:bg-neutral-700 px-3 py-1 rounded-full">
          Items:
        </span>
        <div class="flex items-center space-x-2 
                    bg-neutral-300 dark:bg-neutral-600 
                    border-2 border-black dark:border-white
                    rounded-xl shadow-inner p-1">
          <button class="w-10 h-10 flex items-center justify-center rounded-full 
                         bg-black dark:bg-white text-white dark:text-black 
                         text-2xl font-bold 
                         transition-all duration-200
                         hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white 
                         transform rotate-6 hover:rotate-0">-</button>
          <span class="w-12 h-12 flex items-center justify-center 
                       text-3xl font-extrabold 
                       border-l-2 border-r-2 border-neutral-600 dark:border-neutral-300 
                       text-neutral-900 dark:text-neutral-50">
            1
          </span>
          <button class="w-10 h-10 flex items-center justify-center rounded-full 
                         bg-black dark:bg-white text-white dark:text-black 
                         text-2xl font-bold 
                         transition-all duration-200
                         hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white 
                         transform -rotate-6 hover:-rotate-0">+</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- To demonstrate states, one would typically add JS to toggle 'added' and 'loading' classes on the button -->
<!-- Example: -->
<!-- <script>
  const button = document.querySelector('.group.relative');
  button.addEventListener('click', () => {
    button.classList.add('loading');
    setTimeout(() => {
      button.classList.remove('loading');
      button.classList.add('added');
      setTimeout(() => {
        button.classList.remove('added');
        // Optionally reset button or show another state
      }, 2000); // Display 'Added!' for 2 seconds
    }, 1500); // Simulate loading for 1.5 seconds
  });
</script> -->

Luxury_Retro_Add_to_Cart_Button

一个优雅的“添加到购物车”（或房地产的“立即查询”）按钮组件，具有奢华/高级感和复古/复古调色板。专为房地产平台设计，具有响应式设计和深色模式支持。

打开预览

                <div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 font-sans antialiased flex items-center justify-center min-h-[150px]">
  <div class="max-w-md w-full bg-stone-50 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="p-4 sm:p-6 flex flex-col md:flex-row items-center justify-between">
      <div class="flex-grow text-center md:text-left mb-4 md:mb-0">
        <p class="text-stone-900 dark:text-stone-100 text-xl sm:text-2xl font-light tracking-wide mb-1 opacity-90">Price:</p>
        <p class="text-orange-900 dark:text-orange-300 text-2xl sm:text-3xl font-medium tracking-tight">$1,250,000</p>
        <p class="text-stone-600 dark:text-stone-400 text-sm mt-1">Estimated Mortgage: $4,500/month</p>
      </div>
      <div class="w-full md:w-auto">
        <button class="w-full px-6 py-3 font-semibold text-lg tracking-wide rounded-md 
                       bg-fuchsia-800 hover:bg-fuchsia-900 text-stone-50 
                       dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:text-stone-50
                       transition-colors duration-300 
                       focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-800 
                       active:scale-[0.98] active:shadow-inner">
          Inquire Now
        </button>
      </div>
    </div>
    <div class="px-4 pb-4 sm:px-6 sm:pb-6 pt-2">
      <p class="text-stone-700 dark:text-stone-300 text-xs sm:text-sm text-center md:text-left">Click 'Inquire Now' for more details or to schedule a viewing.</p>
    </div>
  </div>
</div>

添加到购物车按钮组件

响应式“添加到购物车”按钮组件，具有三色、微交互焦点和对电子商务应用程序的深色模式支持。

打开预览

                <div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
    bg-emerald-500 text-white
    hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
    transition-all duration-300 ease-in-out
    overflow-hidden
    shadow-lg hover:shadow-xl
    dark:bg-emerald-600 dark:hover:bg-emerald-700">
    <span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
      Add to Cart
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out
      text-purple-200 dark:text-purple-300
      bg-purple-600 dark:bg-purple-700
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
      </svg>
      Added!
    </span>
    <span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
      transition-transform duration-300 ease-in-out delay-150
      text-orange-200 dark:text-orange-300
      bg-orange-500 dark:bg-orange-600
      rounded-full
      scale-y-0 group-hover:scale-y-100
      opacity-0 group-hover:opacity-100
      group-hover:px-6 group-hover:py-3
      hidden">
      <svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
      </svg>
      Adding...
    </span>
  </button>
</div>

添加到购物车按钮组件

一个响应式“添加到购物车”按钮组件，采用 Material Design 原则设计，具有三元配色方案并支持深色模式。它专为仪表板使用而设计，包括一个数量选择器，并使用 Tailwind CSS 为阴影和动画集成深度效果。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row items-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl space-y-4 md:space-y-0 md:space-x-6 w-full max-w-2xl transform transition-all duration-300 hover:shadow-2xl">
    <div class="flex-shrink-0 w-32 h-32 md:w-48 md:h-48 rounded-lg overflow-hidden shadow-md dark:shadow-lg">
      <img src="https://picsum.photos/seed/addtocart/400/400" alt="Product Image" class="w-full h-full object-cover">
    </div>
    <div class="flex-grow text-center md:text-left">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Awesome Product Name</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">A brief description of the amazing product that will enhance your life.</p>
      <div class="flex items-center justify-center md:justify-start mb-4">
        <span class="text-3xl font-extrabold text-indigo-600 dark:text-teal-400">$29.99</span>
        <span class="text-lg text-gray-500 dark:text-gray-400 line-through ml-2">$39.99</span>
      </div>
      <div class="flex items-center justify-center md:justify-start space-x-3 mb-4">
        <label for="quantity" class="text-gray-700 dark:text-gray-300 font-medium">Quantity:</label>
        <input type="number" id="quantity" name="quantity" min="1" value="1" class="w-20 p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-teal-400">
      </div>
      <button class="w-full md:w-auto px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md transition-all duration-300 hover:bg-indigo-700 dark:bg-teal-500 dark:hover:bg-teal-600 focus:outline-none focus:ring-4 focus:ring-indigo-500 dark:focus:ring-teal-400 focus:ring-opacity-50 transform hover:-translate-y-0.5 active:scale-95">
        <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" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z" />
        </svg>
        Add to Cart
      </button>
      <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Estimated delivery: <span class="font-bold">3-5 business days</span></p>
        <p>In stock: <span class="font-bold text-green-500">Yes</span></p>
      </div>
    </div>
  </div>
</div>

添加到购物车按钮

一个简单的大地色系添加到购物车按钮，具有微交互启发的悬停效果，具有响应式设计和深色模式支持。

打开预览

                <button class="bg-brown-600 hover:bg-brown-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:scale-105
                       dark:bg-brown-700 dark:hover:bg-brown-800">
  <span class="text-sm">Add to Cart</span>
</button>

拟物化 Add to Cart 按钮

拟物化添加到购物车按钮，具有鲜艳的色彩，适用于投资组合网站，具有复杂的设计、交互式元素和使用 Tailwind CSS 的响应式深色模式支持。

打开预览

                <button class="relative flex items-center justify-center p-4 overflow-hidden text-lg font-bold text-white transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-600 to-blue-500 rounded-2xl shadow-2xl group focus:outline-none focus:ring-4 focus:ring-purple-800 transform hover:scale-105 active:scale-95 dark:from-gray-800 dark:to-gray-900 dark:shadow-none dark:hover:from-gray-700 dark:hover:to-gray-800">
    <span class="relative z-10 flex items-center justify-center w-full h-full p-2 space-x-3 transition-all duration-300 ease-in-out bg-gradient-to-br from-purple-800 to-blue-600 rounded-xl shadow-inner-xl group-hover:from-purple-700 group-hover:to-blue-500 dark:from-gray-700 dark:to-gray-800 dark:group-hover:from-gray-600 dark:group-hover:to-gray-700">

        <!-- Texture Overlay -->
        <div class="absolute inset-0 z-0 bg-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');"></div>

        <!-- Main Button Content -->
        <div class="relative z-10 flex items-center space-x-3">
            <svg class="w-8 h-8 text-white transform -rotate-12 group-hover:rotate-0 transition-transform duration-300 ease-in-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0-10a2 2 0 110 4 2 2 0 010-4zm-8 4a2 2 0 110 4 2 2 0 010-4z"></path>
            </svg>
            <span class="text-white text-shadow-md">Add to Cart</span>
        </div>

        <!-- Dynamic Light Reflection -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden rounded-xl">
            <div class="absolute w-1/2 h-full bg-white opacity-20 transform -skew-x-12 -translate-x-full group-hover:translate-x-full transition-transform duration-500 ease-in-out"></div>
        </div>

        <!-- Inner Shadow for Depth -->
        <div class="absolute inset-0 rounded-xl shadow-inner-2xl dark:shadow-inner-2xl-dark"></div>

    </span>

    <!-- Outer Bevel/Emboss Effect -->
    <div class="absolute inset-0 border-4 border-white border-opacity-10 rounded-2xl dark:border-opacity-5"></div>

</button>

<style>
    /* Custom shadow for Skeuomorphism */
    .shadow-inner-xl {
        box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 10px rgba(255, 255, 255, 0.1);
    }

    .shadow-inner-2xl {
        box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 -8px 15px rgba(255, 255, 255, 0.15);
    }

    .shadow-inner-2xl-dark {
        box-shadow: inset 0 8px 20px rgba(0, 0, 0, 0.6), inset 0 -8px 15px rgba(255, 255, 255, 0.05);
    }

    .text-shadow-md {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
</style>

添加到购物车按钮组件

一个复杂的添加到购物车按钮，设计具有复古/复古美学和互补配色方案，适用于专业公司网站。此组件支持深色模式，并且是响应式的，利用 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>