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 ensemble de boutons interactifs pour une application CRM/Business Tools, avec des micro-interactions, des couleurs de bijou et une réactivité totale avec prise en charge du mode sombre.
Composant Boutons
Un composant de boutons minimaliste conçu avec Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres.
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.