Rechercher des composants

Catégories

Composants Ajouter au panier Bouton

Ajouter au panier Bouton

Bouton pour ajouter des produits au panier

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » de couleur pastel inspiré de la nature, conçu pour les applications médicales/de santé, avec des lignes fluides et un design réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Ajouter au panier Composant du bouton

Un bouton réactif « Ajouter au panier » avec des micro-interactions attrayantes, des tons de coucher de soleil/chauds, adapté aux sites Web de restauration, avec une animation subtile au survol/clic et la prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » réactif pour les sites Web de voyage/tourisme, inspiré par la conception papier/impression avec des tons chauds de coucher de soleil. Comprend la prise en charge du mode sombre et un effet interactif subtil.

Ouvrir Aperçu

                <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>

Brutalisme Ajouter au panier Bouton

Un composant de bouton simple et brutaliste « Ajouter au panier » avec un contraste élevé, des couleurs complémentaires et un objectif de médias sociaux. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Ajouter au panier Glassmorphism Earth Tones Button

Un simple bouton « Ajouter au panier » conçu avec un style glassmorphism, en utilisant des tons de terre, adapté à une application sur le thème de la météo et du climat. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <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

Un composant de bouton « Ajouter au panier » d’inspiration organique/naturelle avec une palette de couleurs complémentaires, adapté aux plateformes éducatives. Présente des lignes fluides, des éléments interactifs subtils, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Ajouter au panier Composant du bouton

Un composant complexe de bouton « ajouter au panier » pour les applications médicales/de soins de santé, inspiré de la typographie suisse/internationale et des tons de terre. Il présente un design épuré et minimaliste qui met l’accent sur la typographie et les systèmes de grille, offrant une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Ajouter au panier Composant du bouton

Un composant de bouton complexe et skeuomorphe « Ajouter au panier » conçu pour les interfaces de jeu, doté d’une palette de couleurs analogue et d’une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <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>

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » inspiré de la nature, de couleur bonbon, conçu pour un forum/une plate-forme communautaire, avec un style fluide et organique. Il est réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <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

Un composant de bouton « Ajouter au panier » de style industriel conçu avec des tons océan/bleu pour les sites Web gouvernementaux/de services publics. Comprend des éléments exposés, une esthétique utilitaire, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <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>