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 Bouton
Ajouter au panier Composant de bouton avec design minimaliste / plat, palette de couleurs en niveaux de gris, niveau de complexité complexe, à des fins de tableau de bord, avec un design réactif et la prise en charge du thème sombre.
Ajouter au panier Composant du bouton
Un composant de bouton complexe et skeuomorphe « Ajouter au panier » conçu pour les interfaces de jeu, doté d’une palette de couleurs analogue et d’une réactivité totale avec prise en charge du mode sombre.
Ajouter au panier Bouton
Un composant de bouton Ajouter au panier de conception 3D avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.