Componente pulsante Aggiungi al carrello
Un componente pulsante reattivo "Aggiungi al carrello" con colori triadici, messa a fuoco della microinterazione e supporto della modalità scura per applicazioni di e-commerce.
Codice HTML
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="group relative flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold
bg-emerald-500 text-white
hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700
transition-all duration-300 ease-in-out
overflow-hidden
shadow-lg hover:shadow-xl
dark:bg-emerald-600 dark:hover:bg-emerald-700">
<span class="relative z-10 transition-transform duration-300 ease-in-out group-hover:-translate-x-full opacity-100 group-hover:opacity-0 whitespace-nowrap">
Add to Cart
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out
text-purple-200 dark:text-purple-300
bg-purple-600 dark:bg-purple-700
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
Added!
</span>
<span class="absolute inset-0 flex items-center justify-center transform translate-x-full group-hover:translate-x-0
transition-transform duration-300 ease-in-out delay-150
text-orange-200 dark:text-orange-300
bg-orange-500 dark:bg-orange-600
rounded-full
scale-y-0 group-hover:scale-y-100
opacity-0 group-hover:opacity-100
group-hover:px-6 group-hover:py-3
hidden">
<svg class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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-.182 1.703.707 1.703H17m0-10a2 2 0 110 4 2 2 0 010-4zm-7 4a2 2 0 110 4 2 2 0 010-4z" />
</svg>
Adding...
</span>
</button>
</div>Componenti correlati
Pulsante Aggiungi al carrello
Un componente pulsante Aggiungi al carrello con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Pulsante Aggiungi al carrello
Un componente reattivo del pulsante Aggiungi al carrello progettato in uno stile scheumorfico, con colori vivaci e supporto per temi scuri, adatto per le interfacce dei social media.
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.