本页出处
设计风格资料库
内容来自 luckymaomi 的 UI 风格库(复刻版),以 MIT 许可 提供。本站镜像收录,仅作学习参考;这一页的原始地址是 原站页面。
← 回到导览访问原站仓库
返回配方目录
Retro Vintage

复古怀旧风组件配方

font-serif uppercase tracking-widest border-2 border-[#8b4513] transition-colors duration-200 bg-[#8b4513] text-[#f5e6d3] hover:bg-[#5c2e0a] hover:text-[#f5e6d3] active:bg-[#4a2408]
button

按钮

Vintage button with serif font, warm tones, and wide letter-spacing

基础骨架
font-serif uppercase tracking-widest border-2 border-[#8b4513] transition-colors duration-200
变体
主要、次要、轮廓
状态
hover、active、disabled
card

卡片

Vintage card with parchment background and decorative borders

基础骨架
bg-[#f5e6d3] border-2 border-[#8b4513] relative transition-colors duration-200
变体
默认、华丽、深色
状态
hover
input

输入框

Vintage input with serif font and warm border colors

基础骨架
w-full bg-transparent border-2 border-[#8b4513] text-[#8b4513] font-serif placeholder:text-[#8b4513]/40 focus:outline-none transition-colors duration-200
变体
默认、填充
状态
focus、disabled