Ajouter au panier Composant du bouton
Un composant de bouton « Ajouter au panier » inspiré de la nature, de couleur bonbon, conçu pour un forum/une plate-forme communautaire, avec un style fluide et organique. Il est réactif et prend en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen">
<button class="relative flex items-center justify-center
px-8 py-3
font-bold text-lg text-white
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-purple-700
group
overflow-hidden
bg-gradient-to-br from-pink-400 via-purple-400 to-green-400
dark:from-pink-700 dark:via-purple-700 dark:to-green-700
shadow-lg shadow-pink-300/50 dark:shadow-purple-700/50
rounded-full
transform hover:scale-105 active:scale-95
border-2 border-transparent hover:border-white dark:hover:border-gray-800">
<span class="relative z-10 flex items-center gap-2">
<svg class="w-6 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 0a2 2 0 100 4 2 2 0 000-4z"></path>
</svg>
<span>Add to Cart</span>
</span>
<!-- Organic blob background for hover effect -->
<div class="absolute inset-0 z-0
bg-gradient-to-br from-white/20 via-white/5 to-white/20
dark:from-black/20 dark:via-black/5 dark:to-black/20
transform
scale-0 group-hover:scale-100
transition-all duration-500 ease-out
rounded-full
blur-lg opacity-0 group-hover:opacity-100
bg-opacity-0 group-hover:bg-opacity-100
origin-center
"></div>
<div class="absolute inset-0 z-0
bg-gradient-to-br from-pink-300 via-purple-300 to-green-300
dark:from-pink-600 dark:via-purple-600 dark:to-green-600
transform
scale-0 group-hover:scale-100
transition-all duration-500 ease-out
rounded-full
blur-md opacity-0 group-hover:opacity-75
origin-center
" style="clip-path: ellipse(60% 60% at 50% 50%);"></div>
</button>
</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.
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 Composant du bouton
Un bouton d’ajout au panier réactif conçu pour le mode sombre à l’aide de Tailwind CSS.