Componenti Pulsante Aggiungi al carrello Luxury_Retro_Add_to_Cart_Button

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.

Anteprima

Codice HTML

<div class="p-4 sm:p-6 md:p-8 bg-stone-100 dark:bg-stone-900 font-sans antialiased flex items-center justify-center min-h-[150px]">
  <div class="max-w-md w-full bg-stone-50 dark:bg-stone-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] hover:shadow-2xl">
    <div class="p-4 sm:p-6 flex flex-col md:flex-row items-center justify-between">
      <div class="flex-grow text-center md:text-left mb-4 md:mb-0">
        <p class="text-stone-900 dark:text-stone-100 text-xl sm:text-2xl font-light tracking-wide mb-1 opacity-90">Price:</p>
        <p class="text-orange-900 dark:text-orange-300 text-2xl sm:text-3xl font-medium tracking-tight">$1,250,000</p>
        <p class="text-stone-600 dark:text-stone-400 text-sm mt-1">Estimated Mortgage: $4,500/month</p>
      </div>
      <div class="w-full md:w-auto">
        <button class="w-full px-6 py-3 font-semibold text-lg tracking-wide rounded-md 
                       bg-fuchsia-800 hover:bg-fuchsia-900 text-stone-50 
                       dark:bg-emerald-700 dark:hover:bg-emerald-800 dark:text-stone-50
                       transition-colors duration-300 
                       focus:outline-none focus:ring-2 focus:ring-fuchsia-500 dark:focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-stone-50 dark:focus:ring-offset-stone-800 
                       active:scale-[0.98] active:shadow-inner">
          Inquire Now
        </button>
      </div>
    </div>
    <div class="px-4 pb-4 sm:px-6 sm:pb-6 pt-2">
      <p class="text-stone-700 dark:text-stone-300 text-xs sm:text-sm text-center md:text-left">Click 'Inquire Now' for more details or to schedule a viewing.</p>
    </div>
  </div>
</div>

Componenti correlati

Brutalism Pastel Pulsante Aggiungi al carrello

Pulsante Aggiungi al carrello ispirato al brutalismo con una combinazione di colori pastello, complessità moderata e design reattivo con supporto per la modalità oscura. Adatto per un blog o un sito Web di contenuti.

Aperto

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.

Aperto

Pulsante Aggiungi al carrello

Pulsante Aggiungi al carrello ispirato al brutalismo con colori vivaci e supporto per la modalità scura.

Aperto