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
Un composant de boutons de style 3D adapté à un portefeuille avec une palette de couleurs analogue et la prise en charge du mode sombre.
Retro_Rainbow_Buttons_Component
Une collection de boutons arc-en-ciel dégradés à thème rétro conçus pour les galeries de photographie et les portfolios, avec une complexité modérée et une réactivité totale et une prise en charge du mode sombre.
Composant Boutons
Composant de boutons réactifs avec conception matérielle, schéma de couleurs triadique et prise en charge du thème sombre.