按钮
Frosted button that stays legible over any photograph
- 基础骨架
inline-flex items-center gap-2 rounded-full transition-all duration-300 ease-out active:scale-[0.98]- 变体
- 毛玻璃、琥珀、幽灵
- 状态
- hover
inline-flex items-center gap-2 rounded-full transition-all duration-300 ease-out active:scale-[0.98] bg-white/12 backdrop-blur-md border border-white/30 text-white hover:bg-white/20 hover:border-white/50Frosted button that stays legible over any photograph
inline-flex items-center gap-2 rounded-full transition-all duration-300 ease-out active:scale-[0.98]Full-bleed photo card with a gradient scrim caption
relative overflow-hidden rounded-2xl bg-[#1A1C22]Frosted field readable over imagery
bg-white/10 backdrop-blur-md border border-white/25 rounded-full px-5 py-3 text-white placeholder-white/50 focus:outline-none focus:border-white/60 focus:bg-white/15 transition-all duration-300