按钮
Pill-shaped button with high-saturation gradient and colored shadow
- 基础骨架
font-bold rounded-full transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 active:scale-95- 变体
- 主要、渐变、蓝色、轮廓
- 状态
- hover、active、disabled
多巴胺设计组件配方
font-bold rounded-full transition-all duration-300 hover:scale-105 hover:-translate-y-0.5 active:scale-95 bg-[#ff006e] text-white shadow-[0_8px_30px_rgba(255,0,110,0.4)] hover:shadow-[0_12px_40px_rgba(255,0,110,0.6)] hover:scale-105 hover:shadow-[0_12px_40px_rgba(255,0,110,0.6)] active:scale-95卡片
Rounded card with colorful shadow and playful hover animation
- 基础骨架
rounded-3xl transition-all duration-300- 变体
- 白色、渐变、粉色
- 状态
- hover
输入框
Rounded input with colorful focus ring and playful placeholder
- 基础骨架
w-full rounded-2xl border-2 border-[#8338ec]/20 bg-white text-[#1a1a2e] font-medium placeholder:text-[#8338ec]/40 focus:outline-none transition-all duration-300- 变体
- 默认、粉色聚焦
- 状态
- focus、disabled