添加到购物车按钮组件
一个响应式“添加到购物车”按钮，具有引人入胜的微交互、日落/暖色调，适用于食品/餐厅网站，具有悬停/点击时的微妙动画和深色模式支持。
HTML 代码
<div class="flex justify-center items-center p-4 bg-gray-50 dark:bg-gray-900 min-h-screen">
<button class="group relative overflow-hidden h-12 w-48 rounded-full bg-gradient-to-r from-orange-500 to-red-500 text-white font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 focus:outline-none focus:ring-4 focus:ring-red-400 focus:ring-opacity-75 dark:from-orange-600 dark:to-red-600 dark:hover:shadow-2xl dark:focus:ring-red-500">
<span class="relative z-10 flex items-center justify-center space-x-2 transition-transform duration-300 group-hover:scale-105 group-active:scale-95">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<span>Add to Cart</span>
</span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-hover:opacity-10 dark:bg-gray-800"></span>
<span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 group-active:opacity-20 dark:bg-gray-800"></span>
</button>
</div>