一个有机/自然风格的“添加到购物车”按钮组件,具有互补的配色方案,适用于教育平台。具有流畅的线条、微妙的交互元素、完全响应能力和深色模式支持。
<div class="flex items-center justify-center p-4 bg-lime-50 dark:bg-zinc-900 min-h-[200px]"> <button class=" relative px-8 py-3 text-lg font-semibold text-emerald-900 dark:text-emerald-100 bg-gradient-to-br from-emerald-400 to-lime-500 dark:from-emerald-700 dark:to-lime-800 rounded-full overflow-hidden shadow-lg shadow-emerald-300/50 dark:shadow-emerald-900/50 transition-all duration-300 ease-in-out focus:outline-none focus:ring-4 focus:ring-emerald-400/50 dark:focus:ring-emerald-700/50 active:scale-95 group "> <!-- Organic Shape Background --> <span class=" absolute inset-0 bg-gradient-to-br from-emerald-500 to-lime-600 dark:from-emerald-800 dark:to-lime-900 rounded-full filter blur-sm opacity-0 group-hover:opacity-100 scale-0 group-hover:scale-105 transition-all duration-500 ease-out pointer-events-none "></span> <!-- Main Button Content --> <span class=" relative z-10 flex items-center justify-center gap-2 transform group-hover:scale-105 transition-transform duration-300 ease-out "> <svg class="w-6 h-6 text-emerald-900 dark:text-emerald-100 group-hover:text-emerald-100 dark:group-hover:text-amber-300 transition-colors duration-300 ease-out " fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.82-.446l4-4.5a1 1 0 00.086-1.267A1 1 0 0019 4H8.145l-.422-1.689A1 1 0 007.28 1H3zM7 18a2 2 0 100-4 2 2 0 000 4zm0-6a2 2 0 100-4 2 2 0 000 4zM17 18a2 2 0 100-4 2 2 0 000 4zM17 14a2 2 0 11-4 0 2 2 0 014 0z"></path> </svg> <span class=" text-emerald-900 dark:text-emerald-100 group-hover:text-emerald-100 dark:group-hover:text-amber-300 transition-colors duration-300 ease-out ">Enroll Now</span> </span> <!-- Subtle animated glow on hover --> <span class=" absolute inset-0 rounded-full bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-amber-300/50 to-transparent dark:from-amber-600/50 dark:to-transparent opacity-0 group-hover:opacity-100 scale-0 group-hover:scale-125 transition-all duration-700 ease-out animate-pulse group-hover:animate-none pointer-events-none "></span> </button> </div>
一个采用材料设计原则、使用 Tailwind CSS 样式的响应式添加到购物车按钮,支持暗模式主题。
一个响应式“添加到购物车”按钮,具有引人入胜的微交互、日落/暖色调,适用于食品/餐厅网站,具有悬停/点击时的微妙动画和深色模式支持。
响应式“添加到购物车”按钮,具有拟物化设计、单色配色方案和深色主题支持。