css3动画按钮效果代码

CSS3动画按钮效果可以通过使用CSS3的transition和transform属性来实现。transition属性用于指定元素的过渡效果，而transform属性用于指定元素的变换效果。

我们需要定义一个按钮元素，可以是一个div或者button元素，然后通过CSS样式设置按钮的外观。例如，我们可以设置按钮的背景颜色、边框、文字颜色等属性。我们还可以设置按钮的宽度和高度，以及内边距和外边距等样式。

接下来，我们可以使用transition属性来定义按钮的过渡效果。transition属性需要指定过渡的属性、过渡的时间以及过渡的方式。例如，我们可以设置按钮的背景颜色在0.3秒内从红色过渡到蓝色，并且过渡效果为线性。这样，当鼠标悬停在按钮上时，按钮的背景颜色会平滑地过渡到蓝色。

示例代码如下所示：

.button {
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  width: 200px;
  height: 40px;
  transition: background-color 0.3s linear;
}
.button:hover {
  background-color: blue;
}

在上面的示例代码中，我们定义了一个名为.button的类，用于表示按钮元素。按钮的背景颜色初始为红色，文字颜色为白色，没有边框，内边距为10像素上下，20像素左右，宽度为200像素，高度为40像素。我们使用transition属性将按钮的背景颜色过渡效果设置为0.3秒的线性过渡。

当鼠标悬停在按钮上时，按钮的背景颜色会过渡到蓝色。这是因为我们使用:hover伪类选择器来定义按钮在鼠标悬停状态下的样式，将背景颜色设置为蓝色。

除了过渡效果，我们还可以使用transform属性来定义按钮的变换效果。transform属性可以实现元素的平移、旋转、缩放等效果。例如，我们可以在按钮被点击时，将按钮的大小放大到原来的1.2倍，并且按钮向右平移10像素。

示例代码如下所示：

.button {
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  width: 200px;
  height: 40px;
  transition: background-color 0.3s linear, transform 0.3s ease-in-out;
}
.button:active {
  transform: scale(1.2) translateX(10px);
}

在上面的示例代码中，我们使用:active伪类选择器来定义按钮在被点击时的样式。我们使用transform属性将按钮的大小放大到原来的1.2倍，并且向右平移10像素。

通过使用CSS3的transition和transform属性，我们可以实现各种各样的按钮效果，使按钮在交互过程中更加生动和有趣。我们还可以结合其他CSS3特性，如box-shadow、border-radius等，进一步美化按钮的外观。