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.
HTML Code
<div class="flex justify-center items-center p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
<button class="group relative overflow-hidden h-12 w-48 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-75 dark:from-orange-600 dark:to-red-600 dark:hover:shadow-2xl dark:focus:ring-red-500">
<span class="relative z-10 flex items-center justify-center space-x-2 transition-transform duration-300 group-hover:scale-105 group-active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<span>Add to Cart</span>
</span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-10 dark:bg-gray-800"></span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-active:opacity-20 dark:bg-gray-800"></span>
</button>
</div>Composants associés
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.
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 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.