如何使用CSS3实现动态按钮效果？

使用CSS3可以创建各种动态按钮效果，以下是一些常见的方法：

1. **过渡（Transitions）**：通过设置`transition`属性，可以让按钮在状态改变时平滑地切换样式，比如悬停、点击等。例如：

.button {
  background-color: #ccc;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #333;
}

这会使按钮在鼠标悬停时颜色渐变。

2. **动画（Animations）**：如果需要更复杂的交互，可以使用`@keyframes`规则定义动画，然后应用到按钮上：

@keyframes button-grow {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}

.button {
  animation: button-grow 0.5s ease-in-out infinite;
}

这会让按钮在按住时逐渐放大。

3. **CSS伪元素（Pseudo-elements）**：如`:hover`, `:active`和`:focus`可以用于显示不同的按钮状态，比如按下后的视觉反馈：

.button:active {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(2px);
}

这会模拟按钮被按下时的状态。