[分享]css3怎么对button

CSS3是一种非常强大的样式表语言，它可以为网页提供更加多彩和生动的装饰效果。在CSS3中，我们可以很容易地对button按钮进行样式设计。那么，我们该如何为button按钮添加CSS样式呢？确认 首...

CSS3是一种非常强大的样式表语言，它可以为网页提供更加多彩和生动的装饰效果。在CSS3中，我们可以很容易地对button按钮进行样式设计。那么，我们该如何为button按钮添加CSS样式呢？

<button class="myButton">确认</button> 

首先，我们先给button添加一个class属性，方便我们在CSS样式表中进行引用。

.myButton {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.myButton:hover {
  background-color: #3e8e41;
  color: white;
} 

接着，我们在CSS样式表中为.myButton类添加样式。我们可以设置按钮的背景色、边框、文字颜色、内边距、文字对齐方式、文本装饰、显示方式等等属性。同时，我们还可以运用CSS3的过渡效果和鼠标悬浮效果，让按钮在用户操作时有更好的交互效果。

最终，我们可以得到一个漂亮、互动的button按钮。当然，这只是其中一种样式方案，你可以根据自己的需求和创意，设计出更多不同样式的按钮。

<button class="myButton">取消</button>