In den Warenkorb Button-Komponente - Memphis Graustufen Wetter
Eine komplexe "In den Warenkorb"-Schaltflächenkomponente mit Memphis-Design-Inspiration unter Verwendung eines Graustufen-Farbschemas, angepasst an ein Wetter-/Klimaprodukt. Zu den Funktionen gehören ein dynamisches Symbol, ein Ladestatus, eine Impulsanimation und eine Elementanzahl, die alle reaktionsschnell sind und den Dunkelmodus unterstützen. Diese Komponente ist als spielerischer und dennoch funktionaler Call-to-Action für Wetterdaten-Abonnements oder klimabezogene Produkte konzipiert.
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> -->Verwandte Komponenten
Komponente der Schaltfläche "In den Warenkorb"
Eine komplexe "In den Warenkorb"-Button-Komponente für Anwendungen im Gesundheitswesen/Medizin, inspiriert von schweizerischer/internationaler Typografie und Erdtönen. Es zeichnet sich durch ein klares, minimalistisches Design mit Schwerpunkt auf Typografie und Rastersystemen aus und bietet volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.
Komponente der Schaltfläche "In den Warenkorb"
Eine reaktionsschnelle "In den Warenkorb"-Schaltflächenkomponente mit triadischen Farben, Mikrointeraktionsfokus und Unterstützung für den Dunkelmodus für E-Commerce-Anwendungen.
In den Warenkorb Button Komponente 46
Eine Retro-/Vintage-Schaltflächenkomponente "In den Warenkorb", die mit Tailwind CSS entworfen wurde, mit responsivem Design und Unterstützung für dunkle Themen.