[分享]css中button有哪些样式

CSS中的button元素，作为前端开发中常用的页面控件之一，具有丰富的样式选择。本文将介绍常见的button样式。

button {
  background-color: #4CAF50; /*绿色背景*/
  border: none; /*去掉边框*/
  color: white; /*字体颜色*/
  padding: 15px 32px; /*内边距大小*/
  text-align: center; /*居中*/
  text-decoration: none; /*去除下划线*/
  display: inline-block; /*行内块状*/
  font-size: 16px; /*字体大小*/
  margin: 4px 2px; /*外边距大小*/
  cursor: pointer; /*鼠标样式*/
  border-radius: 10px; /*边框圆角*/
  box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2); /*按钮阴影*/
} 

以上是一种较为常见的样式，下面我们将介绍几种变化：

/*按钮背景色透明*/
button.trans {
  background-color: transparent;
  color: black;
}

/*带边框样式*/
button.border {
  border: 2px solid green;
  border-radius: 5px;
}

/*鼠标悬停样式*/
button:hover {
  background-color: #3e8e41;
  color: white;
}

/*禁用样式*/
button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
} 

除上述样式外，还有更多种类的button样式，如悬浮样式、渐变样式、三维样式等，可以根据具体需要进行选择。

总之，button元素的样式选择，可以根据页面风格、用户体验等需求进行自由搭配，增强页面交互性和美观性，提升整个页面的价值。