通过调整 box-shadow 偏移量并扩展 transition 属性作用范围，可实现按钮位移时阴影视觉位置“静止不动”的错觉。
通过调整 box-shadow 偏移量并扩展 transition 属性作用范围，可实现按钮位移时阴影视觉位置“静止不动”的错觉。
在 CSS 悬停动效设计中，一个常见但易被忽略的视觉需求是：希望按钮自身发生位移（如 transform: translate()），而其投射的阴影在页面中保持相对静止——即用户感知到“阴影没动，只有按钮在上浮”。这并非真正固定阴影（CSS 中无法直接锚定阴影坐标），而是利用反向补偿偏移营造视觉一致性。
核心原理很简单：当按钮向左上移动 (-5px, -5px) 时，若同时将阴影向右下扩大 (+5px, +5px)，即从 6px 6px 变为 11px 11px，那么阴影的右下边缘位置保持不变，整体阴影区域在视口中的落点几乎恒定，从而产生“阴影静止、按钮上浮”的专业动效体验。
以下是完整实现代码：
.install span {
font-family: 'Poppins', sans-serif;
font-style: normal;
font-weight: 600;
background-color: rgba(241, 241, 241, 1);
color: #33302f;
fill: #33302f;
}
.install {
margin-left: 1rem;
border-radius: 4px;
padding: 10px 16px; /* 建议增加左右内边距提升点击区域 */
box-shadow: 6px 6px 0 rgba(51, 48, 47, 1);
width: 12rem;
border: 1px solid #33302f;
position: relative;
/* 关键：transition 必须包含 box-shadow，不能仅限 transform */
transition: all 0.3s ease; /* 或更精准地写为：transition: transform 0.3s ease, box-shadow 0.3s ease; */
}
.install:hover {
transform: translate(-5px, -5px);
/* 补偿偏移：原 shadow X/Y = 6px → 新值 = 6px + 5px = 11px */
box-shadow: 11px 11px 0 rgba(51, 48, 47, 1);
}
<button class="install"> <span>Install Theme</span> </button>
✅ 关键要点总结：
- transition: all 是必要条件：若只写 transition: transform 0.3s，box-shadow 变化将无过渡，导致闪烁或突变；
- 偏移量需严格匹配：translate(-5px, -5px) → box-shadow 的 x 和 y 均需 +5px 补偿；
- 避免使用 ::before 伪元素覆盖：原方案中 .install:hover::before { transform: translate(0,0) } 无效，因未定义 ::before 内容及初始 box-shadow，且逻辑冗余；
- 进阶建议：如需更真实立体感，可微调 box-shadow 的模糊值（如 11px 11px 8px）并配合 inset 阴影增强按压反馈。
该技巧广泛适用于卡片悬停、按钮上浮、导航项高亮等场景，兼顾性能（纯 CSS，GPU 加速）与视觉专业性。
