CSS按钮过渡动画效果

按钮的过渡动画，真的是前端里一个小巧但加分的细节。只要加上几行 CSS，就能让按钮在悬停、点击时变得灵动不少，整个交互体验都能提一档。用 transition 搭配 :hover 或 :active，像背景色、透明度、缩放这些属性，改起来也方便，响应也快。

按钮的基础样式先搭好，padding、border-radius、background-color这些先安排上：

.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: #fff;
  background-color: #333;
  text-decoration: none;
}

想要加点动感？加一行 transition 属性就够了：

.button {
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

再搞个悬停状态，配合 :hover 就能立刻看到效果：

.button:hover {
  background-color: #007BFF;
  opacity: 0.8;
}

点击时的动效也别忘了，可以来个缩放的小动作：

.button:active {
  transform: scale(0.95);
}

.button {
  transition: transform 0.2s ease;
}

多个属性想一起过渡？直接用逗号隔开就行了，写法挺直观：

.button {
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
}

还有一点要注意：有些属性像 box-shadow 或 transform，过渡效果，但也比较吃性能。是移动端，效果要帅，体验也得稳。

如果你想试试更多例子，下面这些资源也挺不错的，可以看看：

• css3Transition 主要效果平缓过渡
• CSS3 过渡 transition 效果实例
• 鼠标悬停图标按钮动画提示框效果
• 带悬停动画效果的 CSS 按钮

如果你平时按钮用得比较多，建议搞个组件封装一下，省事也好复用。