Ajouter au panier Composant du bouton
Un composant réactif du bouton Ajouter au panier conçu dans un style brutaliste avec des couleurs vives, adapté aux interfaces de médias sociaux avec prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 border border-red-600 dark:border-red-400 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
<h2 class="text-2xl font-bold mb-3 text-red-600 dark:text-red-400">Add to Cart</h2>
<img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="w-full h-auto rounded-lg mb-4">
<p class="text-lg font-medium text-gray-800 dark:text-gray-200">Check out this amazing product that you will love!</p>
<div class="mt-5">
<button class="bg-blue-600 dark:bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-500 dark:hover:bg-blue-400 transition duration-300 ease-in-out">
Add to Cart
</button>
</div>
<div class="mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-red-600 dark:border-red-400">
</div>
</div>
</div>Composants associés
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.
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.
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.