Composants Ajouter au panier Bouton Ajouter au panier Composant du bouton

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.

Aperçu

HTML Code

<div class="flex justify-center items-center p-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 transform transition-transform hover:scale-105">
        <div class="flex justify-between items-center mb-4">
            <img src="https://picsum.photos/50" alt="Product Image" class="w-16 h-16 rounded-full border-2 border-violet-600 shadow-lg">
            <div class="ml-4">
                <h2 class="text-lg font-bold text-violet-700 dark:text-violet-300">Product Name</h2>
                <p class="text-md text-gray-600 dark:text-gray-300">$49.99</p>
            </div>
        </div>
        <button class="w-full bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-600 text-white font-bold py-2 px-4 rounded-lg shadow-2xl transform hover:translate-y-1 transition-all duration-200 ease-in-out">
            Add to Cart
        </button>
    </div>
</div>

Composants associés

Ajouter au panier Bouton

Bouton « Ajouter au panier » réactif avec design Skeuomorphic, palette de couleurs monochromatique et prise en charge du thème sombre.

Ouvrir

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 Bouton Composant 46

Un composant de bouton rétro/vintage « Ajouter au panier » conçu avec Tailwind CSS, avec un design réactif et la prise en charge des thèmes sombres.

Ouvrir