Componente pulsante Aggiungi al carrello
Un pulsante reattivo "Aggiungi al carrello" con microinterazioni accattivanti, toni caldi / tramonto, adatto per siti Web di cibo / ristoranti, con una sottile animazione al passaggio del mouse / clic e supporto per la modalità oscura.
Codice HTML
<div class="flex justify-center items-center p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
<button class="group relative overflow-hidden h-12 w-48 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-75 dark:from-orange-600 dark:to-red-600 dark:hover:shadow-2xl dark:focus:ring-red-500">
<span class="relative z-10 flex items-center justify-center space-x-2 transition-transform duration-300 group-hover:scale-105 group-active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>Add to Cart</span>
</span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-10 dark:bg-gray-800"></span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-active:opacity-20 dark:bg-gray-800"></span>
</button>
</div>Componenti correlati
Aggiungi al carrello Pulsante Componente 46
Un componente pulsante "Aggiungi al carrello" retrò/vintage progettato con Tailwind CSS, con design reattivo e supporto per temi scuri.
Componente pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello in stile 3D con colori vivaci, design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Aggiungi al carrello Componente pulsante - Memphis Grayscale Meteo
Un complesso componente pulsante "Aggiungi al carrello" ispirato al design Memphis utilizzando una combinazione di colori in scala di grigi, adattata per un prodotto meteorologico/climatico. Le caratteristiche includono un'icona dinamica, lo stato di caricamento, l'animazione degli impulsi e un conteggio degli elementi, tutti reattivi e con supporto per la modalità oscura. Questo componente è progettato come un invito all'azione giocoso ma funzionale per gli abbonamenti ai dati meteorologici o i prodotti relativi al clima.