答案是通过CSS的:hover和::after实现按钮悬停阴影效果。具体为：按钮默认隐藏伪元素，悬停时扩展带box-shadow的::after，配合透明度与尺寸过渡，形成平滑扩散的阴影动画，提升视觉层次与交互细腻度。
要实现CSS按钮在悬停时显示阴影，并使用 ::after 伪元素结合 box-shadow 和 :hover，可以通过控制伪元素的显示状态和阴影效果来增强视觉反馈。这种方式比直接改变元素本身更灵活，能做出更细腻的动画效果。
基本原理说明
利用 :hover 触发状态变化，通过 ::after 在按钮上动态添加一个带有阴影的图层。默认情况下隐藏该图层，悬停时显示并加上过渡动画，实现平滑出现的阴影效果。
HTML结构
一个简单的按钮标签：
<button class="shadow-btn">悬停试试</button>
CSS样式实现
核心是设置 ::after 的初始透明、无尺寸，并在 :hover 时扩展并显示阴影：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
.shadow-btn {
position: relative;
padding: 12px 24px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 8px;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
}
.shadow-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: transparent;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
pointer-events: none;
}
.shadow-btn:hover::after {
width: 120%;
height: 160%;
opacity: 1;
}
关键点解析
定位与居中：::after 使用绝对定位，通过 top: 50% 和 left: 50% 配合 transform: translate(-50%, -50%) 精准居中。
渐变显示：初始 width 和 height 为 0，悬停时放大至 120% 和 160%，覆盖整个按钮并外扩，使阴影自然“扩散”出来。
阴影柔和感：box-shadow 设置了偏移和模糊值，模拟真实光照效果；rgba 控制透明度避免过重。
动画流畅性：给 ::after 添加 transition，让尺寸和透明度变化更顺滑。
基本上就这些，不复杂但容易忽略细节。关键是控制伪元素的初始状态和过渡行为，就能做出高级感十足的悬停阴影效果。
