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.
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
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.
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.
Ajouter au panier Composant du bouton
Un composant de bouton complexe et skeuomorphe « Ajouter au panier » conçu pour les interfaces de jeu, doté d’une palette de couleurs analogue et d’une réactivité totale avec prise en charge du mode sombre.