Luxury_Retro_Add_to_Cart_Button
一个优雅的“添加到购物车”（或房地产的“立即查询”）按钮组件，具有奢华/高级感和复古/复古调色板。专为房地产平台设计，具有响应式设计和深色模式支持。
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>相关组件
加入购物车按钮组件
一个复古/怀旧风格的“添加到购物车”按钮组件，适用于电子商务应用。这款按钮的设计灵感来自80年代和90年代，使用了相似的色彩方案，并具有互动效果。它是响应式的，支持深色主题。
添加到购物车按钮组件 - Memphis 灰度天气
一个复杂的“添加到购物车”按钮组件，具有 Memphis 设计灵感，使用灰度配色方案，适用于天气/气候产品。功能包括动态图标、加载状态、脉冲动画和项目计数，所有这些都是响应式的，并支持深色模式。此组件旨在为天气数据订阅或气候相关产品提供有趣而实用的行动号召。