Ajouter au panier Bouton

Ajouter au panier Composant du bouton

Un composant de bouton « Ajouter au panier » de style rétro/vintage pour les applications de commerce électronique. Ce bouton a un design nostalgique inspiré des années 80 et 90, utilisant une palette de couleurs analogue et comportant des effets d’interactivité. Il est réactif et prend en charge les thèmes sombres.

Ouvrir l’aperçu

                <div class="flex flex-col items-center">
    <div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
        <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
        <div class="mt-2 flex flex-col items-center">
            <p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
            <span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
            <button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
                <span class="flex items-center justify-center">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                    Add to Cart
                </span>
            </button>
        </div>
    </div>
</div>

Un composant de bouton d’ajout au panier réactif conçu avec des éléments skeuomorphes, des couleurs vives et la prise en charge du thème sombre, adapté à des fins de blog et de consommation de contenu.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center p-6 bg-white rounded-lg shadow-lg dark:bg-gray-800 transition duration-300">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-32 rounded-lg shadow-md mb-4">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200 mb-2">Special Product</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4">This is a great product for your reading material. Click the button below to add it to your cart!</p>
    <button class="bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold py-2 px-4 border rounded-lg hover:scale-105 transform transition duration-300 ease-in-out shadow-lg">
        <span class="flex items-center justify-center">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
            Add to Cart
        </span>
    </button>
</div>

Ajouter au panier Bouton

Ajouter au panier Composant de bouton avec design minimaliste / plat, palette de couleurs en niveaux de gris, niveau de complexité complexe, à des fins de tableau de bord, avec un design réactif et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <button class="flex items-center justify-center w-40 h-10 bg-gray-800 text-white rounded-md shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-800 dark:hover:bg-gray-300 dark:focus:ring-gray-400"> <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg> Add to Cart </button>

Ajouter au panier Bouton

Un composant de bouton d’ajout au panier réactif conçu dans un style skeuomorphe, avec des couleurs vives et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
        <img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
        <div class="flex items-center justify-between w-full mt-4">
            <span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
                Add to Cart
            </button>
        </div>
        <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
            <img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
        </div>
    </div>
</div>

Ajouter au panier Bouton

Un bouton d’ajout au panier réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, prenant en charge les thèmes en mode sombre.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
  <div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
    <img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
    <h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
    <p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold dark:text-white">$19.99</span>
      <button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Ajouter au panier Bouton

Un bouton Skeuomorphic Ajouter au panier avec des effets réactifs et la prise en charge du thème sombre.

Ouvrir l’aperçu

                <button
  class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out"
>
  <span class="flex items-center justify-center">
    <svg
      xmlns="http://www.w3.org/2000/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-.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>
    Add to Cart
  </span>
</button>

Ajouter au panier Bouton

Un composant de bouton Ajouter au panier de conception 3D avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <button class="relative px-6 py-2 font-bold text-white transition-transform duration-300 bg-blue-600 rounded-lg shadow-lg transform hover:scale-105 active:scale-95 dark:bg-blue-700">
            <span class="absolute top-0 left-0 w-full h-full rounded-lg bg-blue-500 opacity-60 transition-opacity duration-300 group-hover:opacity-100"></span>
            <span class="relative z-10">Add to Cart</span>
        </button>
        <div class="absolute right-0 -top-1 -mr-4 z-0 w-10 h-10 bg-blue-200 rounded-full shadow-lg transform scale-75 transition-all duration-300 group-hover:scale-100"></div>
    </div>
</div>

Ajouter au panier Composant du bouton

Un composant de bouton Ajouter au panier inspiré du brutalisme avec Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles, des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
    <img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
    <div class="flex flex-col items-center text-center">
        <h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
        <p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
        <button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
            Add to Cart
        </button>
    </div>
</div>

Ajouter au panier Composant du bouton

Un bouton d’ajout au panier réactif conçu pour le mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex items-center justify-center p-10 bg-gray-900 min-h-screen">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
        <div class="flex items-center">
            <img src="https://picsum.photos/100" alt="Product Image" class="w-16 h-16 rounded-lg mr-4">
            <div class="text-white">
                <h2 class="text-lg font-semibold">Product Name</h2>
                <p class="text-gray-400">Product description goes here.</p>
                <p class="text-xl font-bold mt-2">$29.99</p>
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

Ajouter au panier Bouton

Un composant de bouton skeuomorphique 'Ajouter au panier' conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.

Ouvrir l’aperçu

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 flex items-center space-x-4 transition-transform transform hover:scale-105">
        <img src="https://picsum.photos/50" alt="Product Image" class="w-12 h-12 rounded-lg shadow">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Product Name</h2>
            <p class="text-gray-600 dark:text-gray-400">Short description of the product.</p>
        </div>
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-400 transition duration-200">
            Add to Cart
        </button>
    </div>
</div>

Catégories

Ajouter au panier Bouton