[分享]css3按钮动态效果代码

今天我们来了解一下如何使用CSS3创建一些漂亮的按钮，这些按钮拥有动态的效果，让页面更加生动活泼。下面是一个简单的例子： 我们首先需要创建一个基本的按钮样式：.button { display: in...

今天我们来了解一下如何使用CSS3创建一些漂亮的按钮，这些按钮拥有动态的效果，让页面更加生动活泼。下面是一个简单的例子：

我们首先需要创建一个基本的按钮样式：

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2ecc71;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
} 

现在我们想要为按钮添加悬停效果，当鼠标悬停在按钮上时，颜色会从绿色变成深绿色。

.button:hover {
  background-color: #27ae60;
} 

接下来，我们想创建一个按钮按下的效果，当用户单击按钮时，颜色会变成灰色，达到按下的效果。

.button:active {
  background-color: #7f8c8d;
} 

现在，我们想为这些按钮添加一个淡入淡出的效果，当鼠标移开按钮时，颜色会从深绿色过渡到绿色。

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #2ecc71;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}
.button:hover {
  background-color: #27ae60;
}
.button:active {
  background-color: #7f8c8d;
}
.button:focus {
  background-color: #1abc9c;
  outline: none;
} 

最后，我们要为按钮添加一个焦点效果，当用户使用Tab键切换按钮时，按钮会显示一个边框。

.button:focus {
  background-color: #1abc9c;
  outline: none;
} 

现在，我们的漂亮的按钮就完成了。通过使用CSS3，我们可以创建各种各样的按钮效果，让我们的网站更加丰富多彩。

希望这篇文章对你有所帮助，谢谢！