核心是利用CSS的:hover伪类结合transition和transform属性实现按钮悬停动画。首先创建HTML按钮并设置基础样式，包括内边距、背景色、圆角和文字颜色等，并通过transition定义0.3秒的平滑过渡效果；然后在:hover状态下修改background-color使颜色变深，使用transform: translateY(-2px)实现按钮上浮，添加box-shadow增强立体感，可选scale(1.05)让按钮轻微放大以提升视觉反馈；整体动画时间控制在0.2–0.4秒之间，确保交互自然流畅。
实现按钮悬停动画的核心是使用 CSS 的 :hover 伪类配合过渡（transition）和变换（transform）属性。下面是一个简单实用的初级项目示例，帮助你快速上手。
基础按钮结构
先创建一个简单的 HTML 按钮：<button class="btn">点击我</button>
基础样式设置
为按钮添加基本样式，使其看起来更美观：
.btn {
padding: 12px 24px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
添加悬停效果
利用 :hover 定义鼠标悬停时的样式变化：
.btn:hover {
background-color: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
- background-color：颜色变深，提示可交互
- transform: translateY(-2px)：按钮微微上移，产生“浮起”感
- box-shadow：增加阴影，增强立体效果
可选：添加文字或图标动画
如果你想让文字也有反应，可以结合 scale 变化：
.btn:hover {
transform: translateY(-2px) scale(1.05);
}
基本上就这些。通过组合颜色、位移、缩放和阴影，再配上 transition，就能做出自然流畅的悬停动画。不复杂但容易忽略细节，比如动画时间别太长，一般 0.2–0.4 秒最合适。
