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.
HTML Code
<div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
<div class="flex flex-col items-center text-center">
<h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
<button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
Add to Cart
</button>
</div>
</div>Composants associés
Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » réactif avec des couleurs triadiques, un focus sur la micro-interaction et une prise en charge du mode sombre pour les applications de commerce électronique.
Ajouter au panier Bouton Composant 46
Un composant de bouton rétro/vintage « Ajouter au panier » conçu avec Tailwind CSS, avec un design réactif et la prise en charge des thèmes sombres.
Bouton Ajouter au panier
Un bouton d’ajout au panier simple et aux tons terreux avec des effets de survol inspirés de la micro-interaction, avec un design réactif et une prise en charge du mode sombre.