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
Un composant de bouton d’ajout au panier réactif conçu dans un style skeuomorphe, avec des couleurs vives et une prise en charge du thème sombre, adapté aux interfaces de médias sociaux.
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 Bouton
Bouton « Ajouter au panier » réactif avec design Skeuomorphic, palette de couleurs monochromatique et prise en charge du thème sombre.