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.
HTML Code
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
bg-emerald-500 text-white
hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
transition-all duration-300 ease-in-out
overflow-hidden
shadow-lg hover:shadow-xl
dark:bg-emerald-600 dark:hover:bg-emerald-700">
<span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
Add to Cart
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out
text-purple-200 dark:text-purple-300
bg-purple-600 dark:bg-purple-700
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Added!
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out delay-150
text-orange-200 dark:text-orange-300
bg-orange-500 dark:bg-orange-600
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3
hidden">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
</svg>
Adding...
</span>
</button>
</div>Composants associés
Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » de style rétro/vintage pour les applications de commerce électronique. Ce bouton a un design nostalgique inspiré des années 80 et 90, utilisant une palette de couleurs analogue et comportant des effets d’interactivité. Il est réactif et prend en charge les thèmes sombres.
Organic_Nature_Add_To_Cart_Button
Un composant de bouton « Ajouter au panier » d’inspiration organique/naturelle avec une palette de couleurs complémentaires, adapté aux plateformes éducatives. Présente des lignes fluides, des éléments interactifs subtils, une réactivité totale et une prise en charge du mode sombre.
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.