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
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.
Ajouter au panier Composant du bouton
Un composant de bouton réactif « Ajouter au panier » conçu selon les principes de Material Design, avec une palette de couleurs triadique et prenant en charge le mode sombre. Conçu pour une utilisation sur le tableau de bord, il comprend un sélecteur de quantité et intègre des effets de profondeur à l’aide de Tailwind CSS pour les ombres et les animations.
Ajouter au panier Composant du bouton
Un bouton réactif « Ajouter au panier » avec des micro-interactions attrayantes, des tons de coucher de soleil/chauds, adapté aux sites Web de restauration, avec une animation subtile au survol/clic et la prise en charge du mode sombre.