按钮动画

按钮动画可以使用CSS3的transition和animation属性来实现。其中，transition属性可以使按钮在鼠标悬浮时产生平滑过渡效果，animation属性则可以让按钮在被点击时产生动态效果。以下是一个示例代码：

<button class="btn">点击我</button>

.btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.btn:hover {
  background-color: #0056b3;
}

.btn:active {
  animation-name: click;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}

@keyframes click {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

在上面的代码中，当鼠标悬浮在按钮上时，背景色会平滑地从蓝色变为深蓝色；当按钮被点击时，会产生一个缩放动画，使按钮产生“被按下”的效果。