Search Components

Add to Cart Button

Button for adding products to shopping cart

Add to Cart Button Component

A nature-inspired, pastel-colored 'Add to Cart' button component designed for healthcare/medical applications, featuring flowing lines and responsive design with dark mode support.

Open Preview

                <div class="flex justify-center items-center p-4 bg-gradient-to-br from-fuchsia-50 to-purple-50 dark:from-purple-950 dark:via-fuchsia-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center py-3 px-8 text-lg font-semibold text-fuchsia-800 bg-gradient-to-r from-fuchsia-200 via-rose-100 to-purple-200 rounded-full shadow-lg overflow-hidden transition-all duration-300 ease-in-out
                   dark:from-fuchsia-800 dark:via-rose-700 dark:to-purple-800 dark:text-fuchsia-50 dark:shadow-xl dark:shadow-fuchsia-900/50
                   hover:scale-105 hover:shadow-xl hover:shadow-fuchsia-300/60 dark:hover:shadow-fuchsia-700/70
                   focus:outline-none focus:ring-4 focus:ring-fuchsia-300 dark:focus:ring-fuchsia-700
                   active:scale-95">
    <span class="relative z-10 flex items-center space-x-2">
      <svg class="w-6 h-6" 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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M16 16h.01"></path>
      </svg>
      <span>Add to Cart</span>
    </span>
    <div class="absolute inset-0 bg-gradient-to-r from-fuchsia-100 via-rose-50 to-purple-100 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100
                dark:from-fuchsia-700 dark:via-rose-600 dark:to-purple-700"></div>

    <!-- Nature-inspired flowing lines overlay -->
    <svg class="absolute inset-0 w-full h-full opacity-30 pointer-events-none transform scale-150 transition-transform duration-500 ease-in-out group-hover:scale-100
                dark:opacity-10 dark:text-fuchsia-300" viewBox="0 0 100 100" preserveAspectRatio="none">
      <path d="M0 50 C 25 20, 75 80, 100 50 L 100 100 L 0 100 Z" fill="currentColor" class="text-fuchsia-300/50 dark:text-fuchsia-600/50"></path>
      <path d="M0 60 C 20 90, 80 10, 100 40 V 100 H 0 Z" fill="currentColor" class="text-purple-300/50 dark:text-purple-600/50"></path>
    </svg>
  </button>
</div>

Add to Cart Button Component

A responsive 'Add to Cart' button with engaging microinteractions, sunset/warm tones, suitable for food/restaurant websites, featuring a subtle animation on hover/click and dark mode support.

Open Preview

                <div class="flex justify-center items-center p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <button class="group relative overflow-hidden h-12 w-48 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-75 dark:from-orange-600 dark:to-red-600 dark:hover:shadow-2xl dark:focus:ring-red-500">
    <span class="relative z-10 flex items-center justify-center space-x-2 transition-transform duration-300 group-hover:scale-105 group-active:scale-95">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      <span>Add to Cart</span>
    </span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-10 dark:bg-gray-800"></span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-active:opacity-20 dark:bg-gray-800"></span>
  </button>
</div>

Add to Cart Button Component

A responsive 'Add to Cart' button component for travel/tourism websites, inspired by paper/print design with warm sunset tones. Includes dark mode support and a subtle interactive effect.

Open Preview

                <div class="flex items-center justify-center p-4 bg-orange-50 dark:bg-gray-950 min-h-screen">
  <button class="relative group overflow-hidden px-8 py-3 rounded-lg shadow-md bg-gradient-to-br from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700
    text-white font-semibold uppercase tracking-wider text-base md:text-lg
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800
    hover:shadow-lg hover:scale-105
    before:content-[''] before:absolute before:inset-0 before:bg-white before:opacity-0 before:blur-md
    group-hover:before:opacity-10 group-hover:before:animate-pulse">
    <span class="relative z-10 flex items-center justify-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform -rotate-12 group-hover:rotate-0 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
      </svg>
      Add to Cart
    </span>

    <!-- Paper Fold Detail (Pseudo-element-like via nested div for simplicity) -->
    <div class="absolute -bottom-2 -right-2 w-8 h-8 rounded-br-lg bg-red-600 dark:bg-red-800 group-hover:bg-red-700 dark:group-hover:bg-red-900 transition-colors duration-300 transform rotate-45 origin-bottom-right group-hover:scale-110">
      <div class="absolute inset-0 w-full h-full bg-orange-400 dark:bg-orange-600 opacity-30 transform -translate-x-1 -translate-y-1 rounded-br-lg"></div>
    </div>

    <!-- Subtle Grain/Texture Overlay (Pseudo-element-like via nested div) -->
    <div class="absolute inset-0 opacity-10 bg-repeat" style="background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000000" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H0v-1z"/%3E%3C/g%3E%3C/svg%3E');"></div>
  </button>
</div>

Brutalism Add to Cart Button

A simple, brutalist-style 'Add to Cart' button component with high contrast, complementary colors, and social media purpose. Fully responsive with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-zinc-900 font-sans">
  <button class="relative group overflow-hidden px-6 py-3 bg-red-600 text-white font-black uppercase tracking-wider border-4 border-black dark:border-white text-lg sm:text-xl md:text-2xl transition-all duration-300 ease-in-out
    shadow-[8px_8px_0_0_#A855F7] hover:shadow-[12px_12px_0_0_#A855F7] dark:shadow-[8px_8px_0_0_#EC4899] dark:hover:shadow-[12px_12px_0_0_#EC4899]
    hover:-translate-y-1 hover:-translate-x-1 focus:outline-none focus:ring-4 focus:ring-offset-4 focus:ring-red-500 dark:focus:ring-pink-500 dark:focus:ring-offset-zinc-900">
    
    <span class="absolute inset-0 bg-purple-600 dark:bg-pink-600 border-4 border-black dark:border-white -z-10
      transform translate-x-2 translate-y-2 group-hover:translate-x-3 group-hover:translate-y-3 transition-all duration-300 ease-in-out"></span>
    
    <span class="flex items-center space-x-3">
      <svg class="w-7 h-7 sm:w-8 sm:h-8 md:w-9 md:h-9" 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 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

  </button>
</div>

Add to Cart Glassmorphism Earth Tones Button

A simple 'Add to Cart' button designed with a glassmorphism style, using earth tones, suitable for a weather/climate-themed application. It's fully responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <button class="relative overflow-hidden w-64 h-16 rounded-full shadow-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 
                 dark:bg-gray-800 dark:bg-opacity-20 dark:border-white dark:border-opacity-10 
                 group transition-all duration-300 ease-in-out 
                 hover:shadow-xl hover:bg-opacity-30 hover:border-opacity-40 
                 dark:hover:bg-opacity-30 dark:hover:border-opacity-20">
    
    <span class="absolute inset-0 bg-gradient-to-br from-green-700 to-green-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out rounded-full"></span>
    
    <span class="relative z-10 flex items-center justify-center text-lg font-semibold text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out group-hover:text-white">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 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 2a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      Add to Cart
    </span>
  </button>
</div>

Organic_Nature_Add_To_Cart_Button

An organic/nature-inspired 'Add to Cart' button component with a complementary color scheme, suitable for educational platforms. Features flowing lines, subtle interactive elements, full responsiveness, and dark mode support.

Open Preview

                <div class="flex items-center justify-center p-4 bg-lime-50 dark:bg-zinc-900 min-h-[200px]">
  <button class="
    relative px-8 py-3
    text-lg font-semibold
    text-emerald-900 dark:text-emerald-100
    bg-gradient-to-br from-emerald-400 to-lime-500
    dark:from-emerald-700 dark:to-lime-800
    rounded-full
    overflow-hidden
    shadow-lg shadow-emerald-300/50 dark:shadow-emerald-900/50
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-4 focus:ring-emerald-400/50 dark:focus:ring-emerald-700/50
    active:scale-95
    group
  ">
    <!-- Organic Shape Background -->
    <span class="
      absolute inset-0
      bg-gradient-to-br from-emerald-500 to-lime-600
      dark:from-emerald-800 dark:to-lime-900
      rounded-full
      filter blur-sm
      opacity-0 group-hover:opacity-100
      scale-0 group-hover:scale-105
      transition-all duration-500 ease-out
      pointer-events-none
    "></span>

    <!-- Main Button Content -->
    <span class="
      relative z-10
      flex items-center justify-center
      gap-2
      transform
      group-hover:scale-105
      transition-transform duration-300 ease-out
    ">
      <svg class="w-6 h-6
        text-emerald-900 dark:text-emerald-100
        group-hover:text-emerald-100 dark:group-hover:text-amber-300
        transition-colors duration-300 ease-out
      " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.82-.446l4-4.5a1 1 0 00.086-1.267A1 1 0 0019 4H8.145l-.422-1.689A1 1 0 007.28 1H3zM7 18a2 2 0 100-4 2 2 0 000 4zm0-6a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4zM17 14a2 2 0 11-4 0 2 2 0 014 0z"></path>
      </svg>
      <span class="
        text-emerald-900 dark:text-emerald-100
        group-hover:text-emerald-100 dark:group-hover:text-amber-300
        transition-colors duration-300 ease-out
      ">Enroll Now</span>
    </span>

    <!-- Subtle animated glow on hover -->
    <span class="
      absolute inset-0
      rounded-full
      bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-300/50 to-transparent
      dark:from-amber-600/50 dark:to-transparent
      opacity-0 group-hover:opacity-100
      scale-0 group-hover:scale-125
      transition-all duration-700 ease-out
      animate-pulse group-hover:animate-none
      pointer-events-none
    "></span>
  </button>
</div>

Add to Cart Button Component

A complex 'add to cart' button component for healthcare/medical applications, inspired by Swiss/International Typography and earth tones. It features a clean, minimalist design with a focus on typography and grid systems, offering full responsiveness and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8">

  <!-- Component Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl mx-auto rounded-lg shadow-xl overflow-hidden
              bg-white dark:bg-gray-800
              border border-gray-200 dark:border-gray-700
              transition-colors duration-300 ease-in-out">

    <!-- Product Header -->
    <div class="p-4 sm:p-5 md:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-1
                 font-sans tracking-wide">
        MediKit Essential
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-light">
        Advanced Diagnostic & First Aid Kit
      </p>
    </div>

    <!-- Product Image and Details -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 p-4 sm:p-5 md:p-6">
      <!-- Product Image -->
      <div class="relative rounded-md overflow-hidden aspect-video sm:aspect-square flex items-center justify-center bg-gray-100 dark:bg-gray-700">
        <img src="https://picsum.photos/600/400?random=10" alt="MediKit Essential Product Image" class="w-full h-full object-cover" loading="lazy">
        <span class="absolute top-2 left-2 px-3 py-1 bg-amber-600/90 dark:bg-amber-700/90 text-white text-xs font-bold rounded-full shadow-md">
          <span class="hidden sm:inline">Limited </span>Stock
        </span>
      </div>

      <!-- Product Details -->
      <div class="flex flex-col justify-between">
        <div>
          <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 mb-2
             font-sans tracking-tight">
            <span class="line-through text-gray-400 dark:text-gray-500 mr-2 text-base sm:text-lg">$119.99</span>
            $99.99
          </p>
          <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1 mb-4">
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
              FDA Approved
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2d00/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              CE Certified
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" 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="M5 13l4 4L19 7"></path></svg>
              2-Year Warranty
            </li>
          </ul>
        </div>

        <!-- Quantity Selector -->
        <div class="flex items-center justify-between mb-4 mt-auto">
          <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-sans">Quantity:</label>
          <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
            <button aria-label="Decrease quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              −
            </button>
            <input type="number" id="quantity" value="1" min="1" max="10" aria-live="polite"
                   class="w-12 text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium
                          text-sm border-x border-gray-300 dark:border-gray-600 outline-none
                          focus:ring-0 appearance-none [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
            <button aria-label="Increase quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              +
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="p-4 sm:p-5 md:p-6 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">

      <button aria-label="Add to Cart" class="relative w-full py-3 px-4 rounded-md shadow-md
                  bg-green-700 dark:bg-green-600 text-white font-semibold text-base sm:text-lg
                  hover:bg-green-800 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" 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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
        <span>Add to Cart</span>
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs opacity-70 hidden md:block">
          ($99.99)
        </span>
      </button>

      <button aria-label="Buy Now" class="w-full py-3 px-4 rounded-md shadow-md
                  bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold text-base sm:text-lg
                  hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600
                  focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" 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="M9 7H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2m-13-2l4 4m0 0l4-4m-4 4V3"></path></svg>
        <span>Buy Now</span>
      </button>

    </div>

    <!-- Information Section (Optional) -->
    <div class="p-4 sm:p-5 md:p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
        <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400 flex-shrink-0" 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="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c0 3.037 1.282 5.767 3.322 7.749L12 21.051l5.75-2.289C20.713 17.514 22 14.887 22 12c0-2.887-1.287-5.514-3.37-7.468z"></path></svg>
        <span>Secure Checkout Guaranteed. Orders ship within 24 hours.</span>
      </div>
    </div>

  </div>
</div>

Add to Cart Button Component

A complex, skeuomorphic 'Add to Cart' button component designed for gaming interfaces, featuring an analogous color scheme and full responsiveness with dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="max-w-md w-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_4px_8px_rgba(255,255,255,0.4),inset_0_-4px_8px_rgba(0,0,0,0.2),0_10px_20px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_4px_8px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.5),0_10px_20px_rgba(0,0,0,0.5)] p-6 sm:p-8 border-t border-l border-gray-100 dark:border-gray-600">
    <div class="flex flex-col sm:flex-row items-center sm:items-start gap-6 mb-8">
      <div class="w-32 h-32 flex-shrink-0 rounded-2xl overflow-hidden shadow-[inset_0_2px_4px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800">
        <img src="https://picsum.photos/id/11/300/300" alt="Game Cover" class="w-full h-full object-cover" />
      </div>
      <div class="flex-grow text-center sm:text-left">
        <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-2 leading-tight drop-shadow-sm">
          Cyberpunk Vanguard
        </h2>
        <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">
          Ultimate Edition 2077
        </p>
        <span class="text-3xl sm:text-4xl font-bold text-green-700 dark:text-green-400 drop-shadow-md">
          $59.99
        </span>
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
      <div class="bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.5)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),0_2px_4px_rgba(0,0,0,0.5)] border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <h3 class="text-md font-semibold text-gray-700 dark:text-gray-200 mb-1">Platform</h3>
        <p class="text-lg font-bold text-gray-900 dark:text-gray-50">PC</p>
        <div class="absolute -top-4 -right-4 w-12 h-12 bg-blue-400 group-hover:bg-blue-500 rounded-full blur-md opacity-20 transition-all duration-300"></div>
      </div>
      <div class="bg-gradient-to-br from-gray-300 to-gray-100 dark:from-gray-800 dark:to-gray-700 p-4 rounded-xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_2px_4px_rgba(255,255,255,0.5)] dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3),0_2px_4px_rgba(0,0,0,0.5)] border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
        <h3 class="text-md font-semibold text-gray-700 dark:text-gray-200 mb-1">Release Date</h3>
        <p class="text-lg font-bold text-gray-900 dark:text-gray-50">12/10/2077</p>
        <div class="absolute -bottom-4 -left-4 w-12 h-12 bg-purple-400 group-hover:bg-purple-500 rounded-full blur-md opacity-20 transition-all duration-300"></div>
      </div>
    </div>

    <div class="relative flex items-center justify-center p-2 rounded-2xl bg-gradient-to-br from-yellow-300 to-orange-400 dark:from-yellow-600 dark:to-orange-700 
                shadow-[inset_0_2px_4px_rgba(255,200,0,0.8),inset_0_-2px_4px_rgba(100,50,0,0.6),0_6px_12px_rgba(0,0,0,0.4)] dark:shadow-[inset_0_2px_4px_rgba(255,200,0,0.2),inset_0_-2px_4px_rgba(50,25,0,0.4),0_6px_12px_rgba(0,0,0,0.6)] group">
      
      <!-- Inner Bevel/Highlight -->
      <div class="absolute inset-0 rounded-2xl border-2 border-yellow-200 dark:border-yellow-700 opacity-80 group-hover:opacity-100 transition-opacity duration-200"></div>

      <!-- Main Button Content -->
      <button class="relative z-10 w-full px-6 py-4 flex items-center justify-center gap-3 
                     font-extrabold text-white text-xl sm:text-2xl tracking-wide uppercase 
                     bg-gradient-to-br from-orange-500 to-yellow-600 dark:from-orange-800 dark:to-yellow-900 
                     rounded-xl shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(255,255,255,0.4)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.5),inset_0_2px_4px_rgba(255,255,255,0.1)] 
                     transform active:scale-[0.98] transition-all duration-150 
                     cursor-pointer outline-none focus:outline-none 
                     ring-4 ring-yellow-400 dark:ring-yellow-600 ring-offset-4 ring-offset-orange-300 dark:ring-offset-orange-800 
                     hover:from-orange-600 hover:to-yellow-700 dark:hover:from-orange-900 dark:hover:to-yellow-950 
                     text-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white drop-shadow-md animate-pulse" fill="currentColor" viewBox="0 0 24 24">
          <path d="M20.71,7.04A2.083,2.083,0,0,0,19.23,6.72L17.7,5.2A2.083,2.083,0,0,0,16.17,4.88L14.7,6.34,17.66,9.3ZM12.04,7.72,3.32,16.44a.439.439,0,0,0-.11.23L2,21.68a.448.448,0,0,0,.54.54l5.01-1.21a.439.439,0,0,0,.23-.11L16.28,11.96Z" />
          <path d="M17.66,9.3,14.7,6.34,12.04,7.72,14.9,10.6 Z" class="fill-current text-white"/>
          <path d="M20,11a1,1,0,0,0-1,1v6a1,1,0,0,1-1,1H4a1,1,0,0,1-1-1V5A1,1,0,0,1,4,4H10a1,1,0,0,0,0-2H4A3,3,0,0,0,1,5V18a3,3,0,0,0,3,3H18a3,3,0,0,0,3-3V12A1,1,0,0,0,20,11Z" />
        </svg>
        <span>Add to Cart</span>
      </button>

      <!-- Subtle background glow -->
      <div class="absolute inset-[10%] rounded-full bg-yellow-300 dark:hidden opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300"></div>
      <div class="absolute inset-[10%] rounded-full bg-yellow-800 hidden dark:block opacity-30 blur-xl group-hover:opacity-50 transition-opacity duration-300"></div>

      <!-- Corner light flares -->
      <div class="absolute top-0 left-0 w-8 h-8 rounded-full bg-white opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300"></div>
      <div class="absolute bottom-0 right-0 w-8 h-8 rounded-full bg-orange-200 opacity-20 blur-md group-hover:opacity-40 transition-opacity duration-300"></div>
    </div>
  </div>
</div>

Add to Cart Button Component

A nature-inspired, candy-colored 'Add to Cart' button component designed for a forum/community platform, featuring a flowing, organic style. It's responsive and supports dark mode.

Open Preview

                <div class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen">
  <button class="relative flex items-center justify-center
                 px-8 py-3
                 font-bold text-lg text-white
                 transition-all duration-300 ease-in-out
                 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-purple-700
                 group
                 overflow-hidden
                 bg-gradient-to-br from-pink-400 via-purple-400 to-green-400
                 dark:from-pink-700 dark:via-purple-700 dark:to-green-700
                 shadow-lg shadow-pink-300/50 dark:shadow-purple-700/50
                 rounded-full
                 transform hover:scale-105 active:scale-95
                 border-2 border-transparent hover:border-white dark:hover:border-gray-800">

    <span class="relative z-10 flex items-center gap-2">
      <svg class="w-6 h-6" 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 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path>
      </svg>
      <span>Add to Cart</span>
    </span>

    <!-- Organic blob background for hover effect -->
    <div class="absolute inset-0 z-0 
                  bg-gradient-to-br from-white/20 via-white/5 to-white/20
                  dark:from-black/20 dark:via-black/5 dark:to-black/20 
                  transform 
                  scale-0 group-hover:scale-100 
                  transition-all duration-500 ease-out 
                  rounded-full 
                  blur-lg opacity-0 group-hover:opacity-100
                  bg-opacity-0 group-hover:bg-opacity-100
                  origin-center
                  "></div>

    <div class="absolute inset-0 z-0 
                  bg-gradient-to-br from-pink-300 via-purple-300 to-green-300
                  dark:from-pink-600 dark:via-purple-600 dark:to-green-600
                  transform 
                  scale-0 group-hover:scale-100 
                  transition-all duration-500 ease-out 
                  rounded-full 
                  blur-md opacity-0 group-hover:opacity-75
                  origin-center
                  " style="clip-path: ellipse(60% 60% at 50% 50%);"></div>

  </button>
</div>

Industrial_AddToCartButton

An industrial-style 'Add to Cart' button component designed with ocean/blue tones for government/public service websites. Features exposed elements, utilitarian aesthetics, full responsiveness, and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Wrapper -->
  <div class="w-full max-w-sm rounded-lg overflow-hidden bg-white dark:bg-gray-800 shadow-xl border border-blue-200 dark:border-blue-900 transition-colors duration-300">
    <div class="p-6 space-y-4">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 text-center uppercase tracking-wide border-b-2 border-blue-500 dark:border-blue-700 pb-2">
        Service Procurement
      </h2>

      <!-- Product/Service Card Example -->
      <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-850 p-4 rounded-md shadow-inner border border-gray-200 dark:border-gray-700">
        <img src="https://picsum.photos/100/100?random=1" alt="Service Image" class="w-24 h-24 object-cover rounded-md mb-4 md:mb-0 md:mr-4 border-2 border-blue-400 dark:border-blue-600 flex-shrink-0">
        <div class="flex-grow text-center md:text-left">
          <p class="text-lg font-semibold text-blue-800 dark:text-blue-300">Environmental Impact Assessment</p>
          <p class="text-sm text-gray-700 dark:text-gray-400">Comprehensive analysis for sustainable urban planning.</p>
          <p class="text-xl font-bold text-gray-900 dark:text-gray-100 mt-2">$1,200.00</p>
        </div>
      </div>

      <!-- Quantity Selector (Industrial Style) -->
      <div class="flex items-center justify-between mt-4">
        <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mr-2">Quantity:</label>
        <div class="relative flex items-center bg-gray-200 dark:bg-gray-700 rounded-md border border-gray-300 dark:border-gray-600 shadow-sm">
          <button type="button" class="flex-shrink-0 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 hover:bg-gray-400 dark:hover:bg-gray-500 p-2 rounded-l-md transition-colors duration-200 border-r border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75" aria-label="Decrease quantity">
            <svg class="w-4 h-4" 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="M20 12H4"></path></svg>
          </button>
          <input type="number" id="quantity" name="quantity" value="1" min="1" class="w-16 text-center bg-transparent text-gray-900 dark:text-gray-100 font-semibold focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none" aria-label="Service quantity">
          <button type="button" class="flex-shrink-0 bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 hover:bg-gray-400 dark:hover:bg-gray-500 p-2 rounded-r-md transition-colors duration-200 border-l border-gray-400 dark:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75" aria-label="Increase quantity">
            <svg class="w-4 h-4" 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="M12 4v16m8-8H4"></path></svg>
          </button>
        </div>
      </div>

      <!-- Add to Cart Button -->
      <button type="button"
        class="w-full flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white 
               bg-gradient-to-r from-blue-700 to-blue-900 
               hover:from-blue-800 hover:to-blue-950 
               focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 
               dark:from-blue-600 dark:to-blue-800 
               dark:hover:from-blue-700 dark:hover:to-blue-900 
               dark:focus:ring-blue-400 
               transition-all duration-300 ease-in-out 
               transform active:scale-95 
               uppercase tracking-wider 
               relative overflow-hidden group"
      >
        <!-- Left Gear Icon -->
        <svg class="w-5 h-5 mr-3 rotate-0 group-hover:rotate-12 transition-transform duration-300" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.333.903 2.28 2.479a1.724 1.724 0 00.009 2.504c1.053 1.577-.746 3.422-2.28 2.479a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.942-3.333-.903-2.28-2.479a1.724 1.724 0 00-.009-2.504c-1.053-1.577.746-3.422 2.28-2.479a1.724 1.724 0 002.573-1.066z"></path>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
        </svg>
        <span class="relative z-10">Add to Procurement List</span>
        <!-- Right Cart Icon -->
        <svg class="w-5 h-5 ml-3 scale-100 group-hover:scale-110 transition-transform duration-300" 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.769.707 1.769H17m0 0A2 2 0 1020 18a2 2 0 00-4 0m0 0H5.4m7 0a2 2 0 102 2 2 2 0 00-2-2z"></path>
        </svg>

        <!-- Industrial Bolt/Rivets Visual Effect -->
        <span class="absolute top-1 left-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute top-1 right-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute bottom-1 left-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
        <span class="absolute bottom-1 right-1 w-2 h-2 bg-blue-900 rounded-full dark:bg-blue-300"></span>
      </button>

      <p class="text-xs text-gray-500 dark:text-gray-400 text-center mt-4">Secure and transparent procurement process.</p>
    </div>
  </div>
</div>

Search Components

Categories

Add to Cart Button