Composants Ajouter au panier Bouton Ajouter au panier Bouton

Ajouter au panier Bouton

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.

Aperçu

HTML Code

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

Composants associés

Luxury_Retro_Add_to_Cart_Button

Un élégant composant de bouton « Ajouter au panier » (ou « Renseignez-vous maintenant » pour l’immobilier) avec une sensation de luxe / haut de gamme et une palette de couleurs rétro / vintage. Conçu pour les plateformes immobilières, avec un design réactif et une prise en charge du mode sombre.

Ouvrir

Ajouter au panier Composant du bouton

Un composant de bouton Ajouter au panier de style 3D avec des couleurs vives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir

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