feat: 优化首页入口按钮质感,提升商业产品精致度
- 按钮背景改为微渐变+毛玻璃效果(backdrop-filter) - 边框改为半透明白色,圆角从8px升级到12px - 增加内高光+外层深度阴影提升层次感 - 字间距、字重大小幅调整,更精致克制 - hover态增加accent光晕+图标变绿+放大效果 - 主按钮增加渐变绿底+内高光+绿色辉光阴影 - 增加按压态scale(0.97)反馈 - 主按钮图标hover放大1.12倍
This commit is contained in:
+62
-16
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user