Pulsante Aggiungi al carrello
Un pulsante Aggiungi al carrello reattivo con i principi del Material Design utilizzando Tailwind CSS, che supporta i temi della modalità oscura.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800 transition-colors duration-300">
<div class="bg-white dark:bg-gray-900 shadow-lg rounded-lg px-5 py-4 transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200/200" alt="Product Image" class="w-full h-40 object-cover rounded-md mb-4">
<h2 class="text-lg font-semibold dark:text-white">Product Name</h2>
<p class="text-gray-700 dark:text-gray-300 mb-4">This is a brief description of the product.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold dark:text-white">$19.99</span>
<button class="bg-blue-600 text-white rounded-md px-4 py-2 transition-colors duration-300 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-600">
Add to Cart
</button>
</div>
</div>
</div>Componenti correlati
Luxury_Retro_Add_to_Cart_Button
Un elegante componente pulsante "Aggiungi al carrello" (o "Richiedi ora" per gli immobili) con un tocco di lusso/premium e una tavolozza di colori retrò/vintage. Progettato per le piattaforme immobiliari, caratterizzato da un design reattivo e dal supporto della modalità oscura.
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.
Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" in stile 3D progettato per le interfacce dei social media. Presenta un'interfaccia ricca con profondità, elementi di design accattivanti ed è reattivo con il supporto del tema scuro.