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

Componente pulsante Aggiungi al carrello

Un componente del pulsante "Aggiungi al carrello" complesso e scheumorfico progettato per le interfacce di gioco, caratterizzato da una combinazione di colori analoga e una reattività completa con supporto per la modalità oscura.

Aperto

Industrial_AddToCartButton

Un componente pulsante "Aggiungi al carrello" in stile industriale progettato con toni oceano/blu per siti Web governativi/di servizio pubblico. Presenta elementi esposti, estetica utilitaristica, reattività completa e supporto per la modalità scura.

Aperto

Componente pulsante Aggiungi al carrello

Un componente pulsante "Aggiungi al carrello" in stile 3D progettato per le interfacce dei social media. Presenta un'interfaccia ricca con profondità, elementi di design accattivanti ed è reattivo con il supporto del tema scuro.

Aperto