按钮
CTA-focused button with gradient shadow for Z-pattern conversion points
- 基础骨架
font-semibold rounded-xl transition-all duration-300- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
Z型布局组件配方
font-semibold rounded-xl transition-all duration-300 bg-[#6366f1] text-white shadow-lg shadow-[#6366f1]/25 hover:shadow-xl hover:shadow-[#6366f1]/30 hover:-translate-y-0.5 active:scale-[0.98]卡片
Clean center-aligned feature card for Z-pattern diagonal content
- 基础骨架
bg-white rounded-2xl text-center transition-shadow duration-200- 变体
- 默认、强调、渐变
- 状态
- hover
输入框
Rounded input for Z-pattern email subscription and lead capture
- 基础骨架
w-full bg-white border border-gray-200 rounded-xl text-[#0f172a] placeholder:text-gray-400 focus:outline-none transition-all duration-200- 变体
- 默认、填充
- 状态
- focus、disabled