Componente pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello ispirato al brutalismo con Tailwind CSS, caratterizzato da contrasto elevato, layout insoliti, effetti reattivi e supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center space-y-4 p-4 bg-white dark:bg-gray-800 border-2 border-black dark:border-white rounded-lg shadow-md">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-lg">
<div class="flex flex-col items-center text-center">
<h2 class="text-lg font-bold text-black dark:text-white">Product Name</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">This is a brief description of the product that gives the user an idea of what they're adding to their cart.</p>
<button class="mt-4 px-6 py-3 bg-yellow-500 text-white font-bold text-sm uppercase rounded-md transition-all duration-300 transform hover:bg-yellow-600 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-400 dark:text-black dark:hover:bg-yellow-500">
Add to Cart
</button>
</div>
</div>Componenti correlati
Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" in stile retrò/vintage per applicazioni di e-commerce. Questo pulsante ha un design nostalgico ispirato agli anni '80 e '90, utilizzando una combinazione di colori analoga e con effetti per l'interattività. È reattivo e supporta temi scuri.
Componente pulsante Aggiungi al carrello
Un componente reattivo del pulsante Aggiungi al carrello progettato in stile brutalista con colori vivaci, adatto per interfacce di social media con supporto per temi scuri.
Pulsante Aggiungi al carrello
Un semplice pulsante di aggiunta al carrello dai toni terrosi con effetti al passaggio del mouse ispirati alla microinterazione, con design reattivo e supporto per la modalità scura.