Ajouter au panier Composant du bouton
Un composant complexe de bouton « ajouter au panier » pour les applications médicales/de soins de santé, inspiré de la typographie suisse/internationale et des tons de terre. Il présente un design épuré et minimaliste qui met l’accent sur la typographie et les systèmes de grille, offrant une réactivité totale et une prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8">
<!-- Component Container -->
<div class="w-full max-w-sm md:max-w-md lg:max-w-xl mx-auto rounded-lg shadow-xl overflow-hidden
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700
transition-colors duration-300 ease-in-out">
<!-- Product Header -->
<div class="p-4 sm:p-5 md:p-6 border-b border-gray-200 dark:border-gray-700">
<h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-1
font-sans tracking-wide">
MediKit Essential
</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-light">
Advanced Diagnostic & First Aid Kit
</p>
</div>
<!-- Product Image and Details -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 p-4 sm:p-5 md:p-6">
<!-- Product Image -->
<div class="relative rounded-md overflow-hidden aspect-video sm:aspect-square flex items-center justify-center bg-gray-100 dark:bg-gray-700">
<img src="https://picsum.photos/600/400?random=10" alt="MediKit Essential Product Image" class="w-full h-full object-cover" loading="lazy">
<span class="absolute top-2 left-2 px-3 py-1 bg-amber-600/90 dark:bg-amber-700/90 text-white text-xs font-bold rounded-full shadow-md">
<span class="hidden sm:inline">Limited </span>Stock
</span>
</div>
<!-- Product Details -->
<div class="flex flex-col justify-between">
<div>
<p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 mb-2
font-sans tracking-tight">
<span class="line-through text-gray-400 dark:text-gray-500 mr-2 text-base sm:text-lg">$119.99</span>
$99.99
</p>
<ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1 mb-4">
<li class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
FDA Approved
</li>
<li class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2d00/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
CE Certified
</li>
<li class="flex items-center">
<svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
2-Year Warranty
</li>
</ul>
</div>
<!-- Quantity Selector -->
<div class="flex items-center justify-between mb-4 mt-auto">
<label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-sans">Quantity:</label>
<div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
<button aria-label="Decrease quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
−
</button>
<input type="number" id="quantity" value="1" min="1" max="10" aria-live="polite"
class="w-12 text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium
text-sm border-x border-gray-300 dark:border-gray-600 outline-none
focus:ring-0 appearance-none [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
<button aria-label="Increase quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
+
</button>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="p-4 sm:p-5 md:p-6 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<button aria-label="Add to Cart" class="relative w-full py-3 px-4 rounded-md shadow-md
bg-green-700 dark:bg-green-600 text-white font-semibold text-base sm:text-lg
hover:bg-green-800 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2
focus:ring-offset-white dark:focus:ring-offset-gray-800
transition-all duration-300 flex items-center justify-center space-x-2
active:scale-[0.98]">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
<span>Add to Cart</span>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs opacity-70 hidden md:block">
($99.99)
</span>
</button>
<button aria-label="Buy Now" class="w-full py-3 px-4 rounded-md shadow-md
bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold text-base sm:text-lg
hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600
focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2
focus:ring-offset-white dark:focus:ring-offset-gray-800
transition-all duration-300 flex items-center justify-center space-x-2
active:scale-[0.98]">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2m-13-2l4 4m0 0l4-4m-4 4V3"></path></svg>
<span>Buy Now</span>
</button>
</div>
<!-- Information Section (Optional) -->
<div class="p-4 sm:p-5 md:p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
<svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c0 3.037 1.282 5.767 3.322 7.749L12 21.051l5.75-2.289C20.713 17.514 22 14.887 22 12c0-2.887-1.287-5.514-3.37-7.468z"></path></svg>
<span>Secure Checkout Guaranteed. Orders ship within 24 hours.</span>
</div>
</div>
</div>
</div>Composants associés
Skeuomorphic Ajouter au panier Bouton
Bouton skeuomorphic Ajouter au panier avec des couleurs vives pour un site Web de portfolio, avec un design complexe avec des éléments interactifs et une prise en charge réactive du mode sombre à l’aide de Tailwind CSS.
Ajouter au panier Bouton
Un bouton d’ajout au panier réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, prenant en charge les thèmes en mode sombre.
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.