答案：通过CSS的transition和box-shadow属性，可实现按钮悬停时平滑出现阴影的效果。首先创建按钮元素并设置默认样式，包括透明阴影和0.3秒过渡动画；鼠标悬停时应用更深更广的box-shadow，支持单层或多层阴影增强立体感，还可配合transform提升浮动效果，整体提升交互质感且操作简单。
想让按钮在鼠标悬停时平滑地出现阴影效果，可以通过 CSS 的 transition（过渡）和 box-shadow（阴影）结合实现。这种方式能提升交互质感，让按钮更具动态感。
基础按钮结构
先创建一个简单的按钮元素：
设置默认样式
给按钮设定基本样式，包括背景色、圆角和初始无阴影状态：
.fancy-btn {
padding: 12px 24px;
font-size: 16px;
color: white;
background-color: #007bff;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
transition: box-shadow 0.3s ease;
}
- box-shadow 初始透明（rgba 第四个值为 0）
- transition 定义了 box-shadow 属性在 0.3 秒内平滑变化
- ease 缓动函数让动画更自然
添加悬停阴影效果
当鼠标移到按钮上时，显示柔和的投影：
立即学习“前端免费学习笔记（深入）”；
.fancy-btn:hover {
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
- 阴影范围扩大（从 2px 到 8px）
- 颜色变深但保持半透明，避免生硬
- 过渡属性自动生效，无需重复定义
进阶：多层阴影与整体提升感
可以叠加多层阴影模拟“浮起”效果：
.fancy-btn:hover {
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.15);
}
- 第一层较近阴影增加立体感
- 第二层扩散阴影增强浮动氛围
- 配合轻微 translateY 可模拟“上浮”动作
基本上就这些。只要合理使用 transition 和 box-shadow，就能做出自然流畅的按钮动效，不复杂但容易忽略细节。记得测试不同背景下的阴影对比度，确保视觉协调。
