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
Ajouter au panier Composant du bouton
Un bouton complexe Ajouter au panier conçu avec une esthétique rétro/vintage et une palette de couleurs complémentaire, adapté à un site Web d’entreprise professionnel. Ce composant prend en charge le mode sombre et est réactif, utilisant Tailwind CSS pour le coiffage.
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.
Ajouter au panier Composant du bouton
Un composant de bouton Ajouter au panier de style 3D avec des couleurs vives, un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.