feat: 优化首页入口按钮质感,提升商业产品精致度

- 按钮背景改为微渐变+毛玻璃效果(backdrop-filter)
- 边框改为半透明白色,圆角从8px升级到12px
- 增加内高光+外层深度阴影提升层次感
- 字间距、字重大小幅调整,更精致克制
- hover态增加accent光晕+图标变绿+放大效果
- 主按钮增加渐变绿底+内高光+绿色辉光阴影
- 增加按压态scale(0.97)反馈
- 主按钮图标hover放大1.12倍
This commit is contained in:
2026-06-02 19:09:00 +08:00
parent 9ababfda46
commit 324ebf5ce5
+62 -16
View File
@@ -148,37 +148,83 @@
min-width: 0;
min-height: 72px;
padding: 0 28px;
border: 1px solid var(--border-subtle);
border-radius: 8px;
background: var(--bg-inset);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(15, 17, 19, 0.84) 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04) inset,
0 2px 8px rgba(0, 0, 0, 0.28);
color: var(--fg-body);
cursor: pointer;
font-size: 17px;
font-weight: 850;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.03em;
transition:
border-color 240ms ease,
background 240ms ease,
color 240ms ease,
transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1),
box-shadow 240ms ease;
}
.omni-home__entry .anticon {
font-size: 18px;
font-size: 19px;
transition: color 240ms ease, transform 240ms ease;
}
.omni-home__entry:hover {
border-color: var(--border-default);
background: var(--bg-hover);
border-color: rgba(255, 255, 255, 0.16);
background: linear-gradient(180deg, rgba(28, 32, 36, 0.78) 0%, rgba(18, 22, 25, 0.88) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 0 24px rgba(var(--accent-rgb), 0.06),
0 4px 16px rgba(0, 0, 0, 0.36);
color: #ffffff;
transform: translateY(-1px);
transform: translateY(-2px);
}
.omni-home__entry:hover .anticon {
color: var(--accent);
transform: scale(1.08);
}
.omni-home__entry:active {
transform: translateY(0) scale(0.97);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.02) inset,
0 1px 4px rgba(0, 0, 0, 0.32);
transition-duration: 80ms;
}
.omni-home__entry--primary {
border-color: var(--accent);
background: var(--accent);
color: var(--dg-button-text, #061014);
border-color: rgba(var(--accent-rgb), 0.48);
background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 0 28px rgba(var(--accent-rgb), 0.18),
0 2px 12px rgba(0, 0, 0, 0.28);
color: #061014;
}
.omni-home__entry--primary:hover {
border-color: var(--accent-hover, var(--accent));
background: var(--accent-hover, var(--accent));
color: var(--dg-button-text, #061014);
border-color: rgba(var(--accent-rgb), 0.64);
background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 0 40px rgba(var(--accent-rgb), 0.28),
0 6px 24px rgba(0, 0, 0, 0.36);
color: #061014;
}
.omni-home__entry--primary .anticon {
color: #061014;
}
.omni-home__entry--primary:hover .anticon {
color: #061014;
transform: scale(1.12);
}
.omni-home__carousel {