Composant Boutons
Un composant de boutons réactifs avec prise en charge du mode sombre, adapté au commerce électronique, doté d’un schéma de couleurs triadique simple.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-6">
<!-- Product Card Example with Buttons -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm mb-8">
<img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/400/300?random=1" alt="Product Image">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Product Title</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">Product description goes here. Short and catchy!.</p>
<div class="flex items-center justify-between mb-4">
<span class="text-lg font-bold text-gray-900 dark:text-gray-50">$29.99</span>
<span class="text-sm text-gray-500 dark:text-gray-400 line-through">$39.99</span>
</div>
<div class="flex space-x-4">
<button class="flex-1 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Add to Cart
</button>
<button class="flex-1 bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Buy Now
</button>
</div>
</div>
<!-- Standalone Buttons Section -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 w-full max-w-sm">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Other Actions</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
View Details
</button>
<button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
Add to Wishlist
</button>
<button class="bg-yellow-500 hover:bg-yellow-600 text-gray-900 font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
Contact Seller
</button>
<button class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-300 ease-in-out transform hover:scale-105">
Report Issue
</button>
</div>
</div>
</div>Composants associés
Composant Boutons
Skeuomorphism Analogue Complex Dashboard Buttons Composant avec design réactif et prise en charge du thème sombre.
Composant Boutons
Boutons de style Material Design avec une palette de couleurs en niveaux de gris à des fins de portfolio, avec un design réactif avec prise en charge du thème sombre.
Composant Boutons
Un composant de boutons réactifs avec prise en charge du mode sombre pour les portfolios. Dispose d’un design plat minimaliste en niveaux de gris avec une complexité modérée.