Ajouter au panier Composant du bouton - Memphis Grayscale Météo
Un composant complexe de bouton « Ajouter au panier » avec l’inspiration du design de Memphis utilisant une palette de couleurs en niveaux de gris, adapté à un produit météo/climat. Les fonctionnalités comprennent une icône dynamique, un état de chargement, une animation d’impulsion et un nombre d’éléments, le tout réactif et prenant en charge le mode sombre. Ce composant est conçu comme un appel à l’action ludique et fonctionnel pour les abonnements aux données météorologiques ou les produits liés au climat.
HTML Code
<div class="flex items-center justify-center p-4 min-h-screen bg-neutral-100 dark:bg-neutral-900 font-sans">
<div class="relative w-full max-w-sm rounded-[24px] overflow-hidden shadow-xl
bg-white dark:bg-neutral-800
border-4 border-black dark:border-white
transform skew-y-3 rotate-1 scale-95 transition-all duration-300 ease-in-out
hover:skew-y-0 hover:rotate-0 hover:scale-100">
<!-- Memphis Pattern Background -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-10">
<div class="absolute -top-10 -left-10 w-32 h-32 bg-neutral-600 dark:bg-neutral-400 rounded-full"></div>
<div class="absolute -bottom-5 -right-5 w-24 h-24 bg-neutral-700 dark:bg-neutral-300 transform rotate-45"></div>
<div class="absolute top-1/4 right-1/4 w-16 h-16 bg-neutral-500 dark:bg-neutral-500 transform skew-x-12"></div>
<div class="absolute bottom-1/3 left-1/3 w-20 h-20 bg-neutral-400 dark:bg-neutral-600 rounded-lg"></div>
</div>
<div class="relative z-10 p-6 sm:p-8 flex flex-col items-center justify-center space-y-6">
<!-- Product Title/Description (Example: Weather Data Package) -->
<h2 class="text-2xl sm:text-3xl font-bold text-neutral-900 dark:text-neutral-50 text-center uppercase tracking-wide
transform -skew-x-6 bg-neutral-200 dark:bg-neutral-700 p-2 rounded-lg">
Premium Climate Insights
</h2>
<p class="text-md sm:text-lg text-neutral-700 dark:text-neutral-200 text-center max-w-xs leading-relaxed">
Unlock 7-day extended forecasts & historical data.
</p>
<div class="flex items-center space-x-4 mb-4">
<!-- Price Display -->
<span class="text-4xl sm:text-5xl font-extrabold text-neutral-900 dark:text-neutral-50
flex items-center skew-y-2
bg-neutral-300 dark:bg-yellow-500
border-4 border-black dark:border-white
px-4 py-2 rounded-xl shadow-lg relative z-10">
<span class="block transform -rotate-6 relative top-1 text-2xl">$</span>29.99
</span>
<!-- Icon for Weather/Climate -->
<img src="https://raw.githubusercontent.com/twbs/icons/main/icons/cloud-sun-fill.svg" alt="Weather Icon" class="w-16 h-16 sm:w-20 sm:h-20
text-neutral-600 dark:text-neutral-300
filter drop-shadow-lg
transform rotate-12 transition-transform duration-300 hover:rotate-0 dark:invert">
</div>
<!-- Dynamic Add to Cart Button -->
<button type="button" class="group relative overflow-hidden h-16 w-full rounded-full
bg-black dark:bg-white
text-white dark:text-black
text-xl sm:text-2xl font-bold uppercase tracking-wider
flex items-center justify-center
shadow-xl
border-4 border-neutral-700 dark:border-neutral-300
transform skew-x-3 transition-transform duration-300
hover:skew-x-0 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-neutral-400 dark:focus:ring-neutral-600 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-800">
<span class="absolute inset-0 bg-neutral-800 dark:bg-neutral-200 transform scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500 ease-out z-0"></span>
<!-- Button content -->
<span class="relative z-10 flex items-center space-x-3 transition-transform duration-300 group-hover:-translate-y-full group-[.added]:translate-x-0 group-[.loading]:translate-x-0">
<span>Add to Cart</span>
<svg class="w-7 h-7 fill-current transition-all duration-300 group-hover:rotate-[360deg]" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M17 11H9.83L12.59 8.24L11.17 6.83L7 11L11.17 15.17L12.59 13.76L9.83 11H17V11Z" />
<path d="M17 12H7V10H17V12Z" class="opacity-0 group-hover:opacity-100 transition-opacity duration-300"/>
</svg>
</span>
<!-- Added state -->
<span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.added]:translate-y-0">
<span>Added!</span>
<svg class="w-7 h-7 fill-current animate-bounce" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M9 16.2L4.8 12L3.4 13.4L9 19L21 7L19.6 5.6L9 16.2Z"/>
</svg>
</span>
<!-- Loading state -->
<span class="absolute z-10 flex items-center space-x-3 text-white dark:text-black transition-transform duration-300 -translate-y-full group-hover:translate-y-0 group-[.loading]:translate-y-0">
<svg class="animate-spin h-7 w-7 text-white dark:text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Loading...
</span>
</button>
<!-- Quantity Selector / Item Count -->
<div class="flex items-center space-x-4 mt-4 text-neutral-800 dark:text-neutral-100">
<span class="text-lg sm:text-xl font-semibold
transform -rotate-3 leading-none opacity-80
bg-neutral-200 dark:bg-neutral-700 px-3 py-1 rounded-full">
Items:
</span>
<div class="flex items-center space-x-2
bg-neutral-300 dark:bg-neutral-600
border-2 border-black dark:border-white
rounded-xl shadow-inner p-1">
<button class="w-10 h-10 flex items-center justify-center rounded-full
bg-black dark:bg-white text-white dark:text-black
text-2xl font-bold
transition-all duration-200
hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white
transform rotate-6 hover:rotate-0">-</button>
<span class="w-12 h-12 flex items-center justify-center
text-3xl font-extrabold
border-l-2 border-r-2 border-neutral-600 dark:border-neutral-300
text-neutral-900 dark:text-neutral-50">
1
</span>
<button class="w-10 h-10 flex items-center justify-center rounded-full
bg-black dark:bg-white text-white dark:text-black
text-2xl font-bold
transition-all duration-200
hover:scale-110 focus:outline-none focus:ring-2 focus:ring-black dark:focus:ring-white
transform -rotate-6 hover:-rotate-0">+</button>
</div>
</div>
</div>
</div>
</div>
<!-- To demonstrate states, one would typically add JS to toggle 'added' and 'loading' classes on the button -->
<!-- Example: -->
<!-- <script>
const button = document.querySelector('.group.relative');
button.addEventListener('click', () => {
button.classList.add('loading');
setTimeout(() => {
button.classList.remove('loading');
button.classList.add('added');
setTimeout(() => {
button.classList.remove('added');
// Optionally reset button or show another state
}, 2000); // Display 'Added!' for 2 seconds
}, 1500); // Simulate loading for 1.5 seconds
});
</script> -->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.
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.
Ajouter au panier Bouton
Un composant de bouton d’ajout au panier réactif conçu avec des éléments skeuomorphes, des couleurs vives et la prise en charge du thème sombre, adapté à des fins de blog et de consommation de contenu.