按钮
Victorian brass button with metallic gradients, warm glow and ornate styling
- 基础骨架
font-serif font-bold uppercase tracking-wider rounded transition-all duration-300- 变体
- 主要、次要、轮廓
- 状态
- hover、active、disabled
蒸汽朋克组件配方
font-serif font-bold uppercase tracking-wider rounded transition-all duration-300 bg-gradient-to-b from-[#b5a642] to-[#8a7d32] text-[#2a1f15] border border-[#d4c85c] shadow-[0_0_12px_rgba(181,166,66,0.3),inset_0_1px_0_rgba(255,255,255,0.2)] hover:shadow-[0_0_20px_rgba(181,166,66,0.5)] hover:scale-105 active:scale-[0.98]卡片
Dark panel with copper border, corner rivets and Victorian industrial aesthetic
- 基础骨架
bg-[#2a1f15] border-2 border-[#b87333]/40 rounded transition-all duration-300 relative overflow-hidden- 变体
- 默认、黄铜、铸铁
- 状态
- hover
输入框
Victorian-styled input with copper border and warm brass focus glow
- 基础骨架
w-full bg-[#2a1f15] border-2 border-[#b87333]/30 rounded font-serif text-[#f5f0e1] placeholder:text-[#b87333]/30 focus:outline-none transition-all duration-300- 变体
- 默认、黄铜
- 状态
- focus、disabled
齿轮徽章
Badge with gear/cog border decoration and metallic finish
- 基础骨架
inline-flex items-center justify-center rounded-full border-2 font-serif outline outline-2 outline-offset-3 outline-current/25 transition-all duration-300- 变体
- 黄铜、紫铜、铸铁
- 状态
- hover
黄铜面板
Panel with brass/copper frame and rivets in Victorian industrial style
- 基础骨架
bg-[#2a1f15] border-2 border-[#b87333]/40 rounded relative overflow-hidden font-serif shadow-[inset_8px_8px_0_-6px_#b87333,inset_-8px_-8px_0_-6px_#b87333,inset_8px_-8px_0_-6px_#b87333,inset_-8px_8px_0_-6px_#b87333] transition-all duration-300- 变体
- 默认、做旧、抛光
- 状态
- hover
发条进度条
Progress bar with clockwork/gear aesthetic and metallic finish
- 基础骨架
w-full h-3 md:h-4 bg-[#1a1510] border border-[#b87333]/30 rounded-none overflow-hidden bg-[repeating-linear-gradient(90deg,transparent_0px,transparent_14px,rgba(184,115,51,0.15)_14px,rgba(184,115,51,0.15)_16px)] transition-all duration-300- 变体
- 黄铜、紫铜、铸铁
- 状态
- 静态