css一键控制多个按钮

CSS作为一种前端语言，在很多页面设计中扮演重要的角色。如果需要控制多个按钮的样式，CSS就可以做到一键控制了，大大提高了工作效率。那么，如何实现呢？

.btn {
  background-color: #333;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-right: 10px;
}

.btn:hover {
  background-color: #444;
} 

以上代码中，我们定义了一个样式类叫做“.btn”，它表示一个通用样式，把按钮的背景颜色、字体颜色、内边距、边框、圆角、鼠标指针等属性都定义了出来。在鼠标悬停的时候，我们还重新定义了背景颜色，让按钮有一个鼠标悬停的效果。

在使用上述代码时，就可以用同一个样式类来控制多个按钮，像这样：

<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button> 

这时候，这三个按钮就会有同样的样式了。

在实际开发中，如果对不同的按钮需要有不同的样式，可以通过为样式类加上不同的后缀，比如“.btn-ok”、“.btn-cancel”等等，灵活运用CSS，可以让页面样式更加优美、高效。