Ajouter au panier Bouton
Un composant de bouton d’ajout au panier réactif conçu dans un style skeuomorphe, avec des couleurs vives et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col items-center relative overflow-hidden w-80">
<img class="rounded-md w-full mb-4 h-32 object-cover" src="https://picsum.photos/400/200" alt="Product Image" />
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Product Name</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">This is a brief description of the product. It tells you what you can expect from this item.</p>
<div class="flex items-center justify-between w-full mt-4">
<span class="text-lg font-bold text-green-500 dark:text-green-400">$49.99</span>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out transform hover:scale-105">
Add to Cart
</button>
</div>
<div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-gray-800 dark:bg-gray-900 rounded-full w-16 h-16 shadow-lg flex items-center justify-center">
<img class="rounded-full w-12 h-12 border-2 border-white" src="https://randomuser.me/api/portraits/men/65.jpg" alt="User Avatar" />
</div>
</div>
</div>Composants associés
Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » inspiré de la nature, de couleur bonbon, conçu pour un forum/une plate-forme communautaire, avec un style fluide et organique. Il est réactif et prend en charge le mode sombre.
Ajouter au panier Composant du bouton
Un composant complexe de bouton « ajouter au panier » pour les applications médicales/de soins de santé, inspiré de la typographie suisse/internationale et des tons de terre. Il présente un design épuré et minimaliste qui met l’accent sur la typographie et les systèmes de grille, offrant une réactivité totale et une prise en charge du mode sombre.
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.