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.
HTML Code
<div class="flex items-center justify-center p-4 bg-lime-50 dark:bg-zinc-900 min-h-[200px]">
<button class="
relative px-8 py-3
text-lg font-semibold
text-emerald-900 dark:text-emerald-100
bg-gradient-to-br from-emerald-400 to-lime-500
dark:from-emerald-700 dark:to-lime-800
rounded-full
overflow-hidden
shadow-lg shadow-emerald-300/50 dark:shadow-emerald-900/50
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-emerald-400/50 dark:focus:ring-emerald-700/50
active:scale-95
group
">
<!-- Organic Shape Background -->
<span class="
absolute inset-0
bg-gradient-to-br from-emerald-500 to-lime-600
dark:from-emerald-800 dark:to-lime-900
rounded-full
filter blur-sm
opacity-0 group-hover:opacity-100
scale-0 group-hover:scale-105
transition-all duration-500 ease-out
pointer-events-none
"></span>
<!-- Main Button Content -->
<span class="
relative z-10
flex items-center justify-center
gap-2
transform
group-hover:scale-105
transition-transform duration-300 ease-out
">
<svg class="w-6 h-6
text-emerald-900 dark:text-emerald-100
group-hover:text-emerald-100 dark:group-hover:text-amber-300
transition-colors duration-300 ease-out
" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.82-.446l4-4.5a1 1 0 00.086-1.267A1 1 0 0019 4H8.145l-.422-1.689A1 1 0 007.28 1H3zM7 18a2 2 0 100-4 2 2 0 000 4zm0-6a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4zM17 14a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
<span class="
text-emerald-900 dark:text-emerald-100
group-hover:text-emerald-100 dark:group-hover:text-amber-300
transition-colors duration-300 ease-out
">Enroll Now</span>
</span>
<!-- Subtle animated glow on hover -->
<span class="
absolute inset-0
rounded-full
bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-300/50 to-transparent
dark:from-amber-600/50 dark:to-transparent
opacity-0 group-hover:opacity-100
scale-0 group-hover:scale-125
transition-all duration-700 ease-out
animate-pulse group-hover:animate-none
pointer-events-none
"></span>
</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.
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 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.