Ajouter au panier Glassmorphism Earth Tones Button
Un simple bouton « Ajouter au panier » conçu avec un style glassmorphism, en utilisant des tons de terre, adapté à une application sur le thème de la météo et du climat. Il est entièrement réactif et prend en charge le mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<button class="relative overflow-hidden w-64 h-16 rounded-full shadow-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30
dark:bg-gray-800 dark:bg-opacity-20 dark:border-white dark:border-opacity-10
group transition-all duration-300 ease-in-out
hover:shadow-xl hover:bg-opacity-30 hover:border-opacity-40
dark:hover:bg-opacity-30 dark:hover:border-opacity-20">
<span class="absolute inset-0 bg-gradient-to-br from-green-700 to-green-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out rounded-full"></span>
<span class="relative z-10 flex items-center justify-center text-lg font-semibold text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out group-hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" 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 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
Add to Cart
</span>
</button>
</div>Composants associés
Bouton Ajouter au panier
Un bouton d’ajout au panier simple et aux tons terreux avec des effets de survol inspirés de la micro-interaction, avec un design réactif et une prise en charge du mode sombre.
Glassmorphism Ajouter au panier Bouton
Ajouter au panier Bouton avec le style Glassmorphism, la palette de couleurs monochromatique et la complexité modérée. Réactif avec prise en charge du mode sombre.
Ajouter au panier Composant du bouton
Un composant réactif du bouton Ajouter au panier conçu dans un style brutaliste avec des couleurs vives, adapté aux interfaces de médias sociaux avec prise en charge du thème sombre.