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.
Codice HTML
<div class="flex flex-col items-center">
<div class="bg-gradient-to-r from-purple-500 to-pink-500 p-6 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-pink-700">
<img src="https://picsum.photos/200/100" alt="Product Image" class="w-full h-auto rounded-t-lg" />
<div class="mt-2 flex flex-col items-center">
<p class="text-white text-lg font-bold dark:text-gray-300">Cool Retro Product</p>
<span class="text-yellow-200 dark:text-yellow-300">$19.99</span>
<button class="mt-4 bg-yellow-400 text-white py-2 px-4 rounded-full transition duration-300 hover:bg-yellow-500 dark:bg-yellow-600 dark:hover:bg-yellow-700">
<span class="flex items-center justify-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
Add to Cart
</span>
</button>
</div>
</div>
</div>Componenti correlati
Pulsante Aggiungi al carrello retrò
Pulsante reattivo "Aggiungi al carrello" con design retrò / vintage, combinazione di colori complementari e complessità moderata per uno scopo di dashboard. Supporta la modalità oscura.
Componente pulsante Aggiungi al carrello
Un complesso pulsante Aggiungi al carrello progettato con un'estetica retrò/vintage e una combinazione di colori complementari, adatto per un sito web aziendale professionale. Questo componente supporta la modalità oscura ed è reattivo, utilizzando Tailwind CSS per lo stile.
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.