Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" ispirato alla natura, color caramella, progettato per una piattaforma di forum/community, caratterizzato da uno stile fluido e organico. È reattivo e supporta la modalità scura.
Codice HTML
<div class="flex items-center justify-center p-4 bg-gradient-to-br from-purple-100 via-pink-100 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 min-h-screen">
<button class="relative flex items-center justify-center
px-8 py-3
font-bold text-lg text-white
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-purple-700
group
overflow-hidden
bg-gradient-to-br from-pink-400 via-purple-400 to-green-400
dark:from-pink-700 dark:via-purple-700 dark:to-green-700
shadow-lg shadow-pink-300/50 dark:shadow-purple-700/50
rounded-full
transform hover:scale-105 active:scale-95
border-2 border-transparent hover:border-white dark:hover:border-gray-800">
<span class="relative z-10 flex items-center gap-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 0a2 2 0 100 4 2 2 0 000-4z"></path>
</svg>
<span>Add to Cart</span>
</span>
<!-- Organic blob background for hover effect -->
<div class="absolute inset-0 z-0
bg-gradient-to-br from-white/20 via-white/5 to-white/20
dark:from-black/20 dark:via-black/5 dark:to-black/20
transform
scale-0 group-hover:scale-100
transition-all duration-500 ease-out
rounded-full
blur-lg opacity-0 group-hover:opacity-100
bg-opacity-0 group-hover:bg-opacity-100
origin-center
"></div>
<div class="absolute inset-0 z-0
bg-gradient-to-br from-pink-300 via-purple-300 to-green-300
dark:from-pink-600 dark:via-purple-600 dark:to-green-600
transform
scale-0 group-hover:scale-100
transition-all duration-500 ease-out
rounded-full
blur-md opacity-0 group-hover:opacity-75
origin-center
" style="clip-path: ellipse(60% 60% at 50% 50%);"></div>
</button>
</div>Componenti correlati
Organic_Nature_Add_To_Cart_Button
Un componente pulsante "Aggiungi al carrello" organico/ispirato alla natura con una combinazione di colori complementari, adatto per piattaforme educative. Presenta linee fluide, sottili elementi interattivi, piena reattività e supporto per la modalità oscura.
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.
Componente pulsante Aggiungi al carrello
Un componente pulsante "Aggiungi al carrello" reattivo con i principi del Material Design, con una combinazione di colori triadica e il supporto della modalità scura. Progettato per l'uso in dashboard, include un selettore di quantità e integra effetti di profondità utilizzando Tailwind CSS per ombre e animazioni.