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 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.
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.
Brutalism Pastel Ajouter au panier Bouton
Bouton Ajouter au panier inspiré du brutalisme avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du mode sombre. Convient pour un blog ou un site Web de contenu.