Aggiungi al carrello Glassmorphism Pulsante Toni della Terra
Un semplice pulsante "Aggiungi al carrello" progettato con uno stile di vetromorfismo, utilizzando i toni della terra, adatto per un'applicazione a tema meteo/clima. È completamente reattivo e supporta la modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<button class="relative overflow-hidden w-64 h-16 rounded-full shadow-lg backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30
dark:bg-gray-800 dark:bg-opacity-20 dark:border-white dark:border-opacity-10
group transition-all duration-300 ease-in-out
hover:shadow-xl hover:bg-opacity-30 hover:border-opacity-40
dark:hover:bg-opacity-30 dark:hover:border-opacity-20">
<span class="absolute inset-0 bg-gradient-to-br from-green-700 to-green-900 opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out rounded-full"></span>
<span class="relative z-10 flex items-center justify-center text-lg font-semibold text-gray-800 dark:text-gray-200 transition-colors duration-300 ease-in-out group-hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" 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>
Add to Cart
</span>
</button>
</div>
Componenti correlati
Glassmorphism Pulsante Aggiungi al carrello
Pulsante Aggiungi al carrello con stile Glassmorphism, combinazione di colori monocromatica e complessità moderata. Reattivo con supporto per la modalità oscura.
Componente pulsante Aggiungi al carrello
Un componente pulsante reattivo "Aggiungi al carrello" per siti Web di viaggi/turismo, ispirato al design della carta/stampa con toni caldi del tramonto. Include il supporto per la modalità oscura e un sottile effetto interattivo.
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.