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
Rétro Ajouter au panier Bouton
Bouton « Ajouter au panier » réactif avec un design rétro/vintage, une palette de couleurs complémentaire et une complexité modérée pour un tableau de bord. Prend en charge le mode sombre.
Ajouter au panier Composant du bouton
Un composant de bouton Ajouter au panier inspiré du brutalisme avec Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles, des effets réactifs et la prise en charge des thèmes sombres.
Ajouter au panier Composant du bouton
Un bouton réactif « Ajouter au panier » avec des micro-interactions attrayantes, des tons de coucher de soleil/chauds, adapté aux sites Web de restauration, avec une animation subtile au survol/clic et la prise en charge du mode sombre.