CSS3动画按钮效果合集

常见的两种方式，一个是transition，一个是animation，前者适合做简单交互，比如鼠标滑过去颜色变了；后者就能搞些花活，比如旋转、跳动、循环什么的。

你比如下面这段：

.button {
  background-color: blue;
  color: white;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: red;
}

是不是眼熟？经典的 hover 换色，还带个平滑过渡，看着就舒服。

再往上走一层，用@keyframes加animation就能做更炫的动画：

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.button {
  background-color: blue;
  color: white;
  animation: rotate 2s linear infinite;
}

这个按钮会一直转圈，挺适合搞点加载中之类的提示，省得用 GIF 图了。

再加上box-shadow、border-radius、linear-gradient这些 CSS3 的小配件，按钮立马立体感拉满，还能搞点拟物风的感觉。

如果你想直接上手玩，不妨看看这些资源包：

• CSS3 游戏首页动画按钮
• css3transition 按钮动画特效.zip
• CSS3transition 鼠标 hover 按钮动画特效
• css3 实现动画按钮.rar
• 纯 css3 按钮动画插件
• jQuery CSS3 激活动画按钮

如果你做活动页、登录页，或者想给导航栏加点动效，搞几个 CSS3 按钮动画样式备着，效率也高，体验也不差。