92款超级漂亮的css按钮样式 复制即用

以下是一个简化的CSS按钮样式集合，每个按钮都是简洁而又引人注目的。

/* 按钮基础样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  border: none;
  border-radius: 5px;
}
 
/* 按钮1 示例 */
.button1 {
  background-color: #007bff;
  box-shadow: 0 5px #0056b3;
}
 
.button1:active {
  background-color: #0069d9;
  box-shadow: 0 3px #00428c;
  transform: translateY(1px);
}
 
/* 按钮2 示例 */
.button2 {
  background-color: #f1c40f;
  box-shadow: 0 5px #c2a20c;
}
 
.button2:active {
  background-color: #e8b009;
  box-shadow: 0 3px #9c790c;
  transform: translateY(1px);
}
 
/* 按钮3 示例 */
.button3 {
  background-color: #2ecc71;
  box-shadow: 0 5px #289f55;
}
 
.button3:active {
  background-color: #289f55;
  box-shadow: 0 3px #228241;
  transform: translateY(1px);
}
 
/* 按钮4 示例 */
.button4 {
  background-color: #e74c3c;
  box-shadow: 0 5px #c0392b;
}
 
.button4:active {
  background-color: #c0392b;
  box-shadow: 0 3px #9d3124;
  transform: translateY(1px);
}
 
/* 按钮5 示例 */
.button5 {
  background-color: #9b59b6;
  box-shadow: 0 5px #793a9a;
}
 
.button5:active {
  background-color: #8e44ad;
  box-shadow: 0 3px #6c238e;
  transform: translateY(1px);
}
 
/* 按钮6 示例 */
.button6 {
  background-color: #3498db;
  box-shadow: 0 5px #2980b9;
}
 
.button6:active {
  background-color: #2980b9;
  box-shadow: 0 3px #2579a9;
  transform: translateY(1px);
}
 
/* 按钮7 示例 */
.button7 {
  background-color: #f39c12;
  box-shadow: 0 5px #d18b09;
}
 
.button7:active {
  background-color: #d79001;
  box-shadow: 0 3px #a87702;
  transform: translateY(1px);
}
 
/* 按钮8 示例 */
.button8 {
  background-color: #1abc9c;
  box-shadow: 0 5px #16a085;
}
 
.button8:active {
  background-color: #159382;
  box-shadow: 0 3px #128171;
  transform: translateY(1px);
}
 
/* 按钮9 示例 */
.button9 {
  background-color: #8e44ad;
  box-shadow: 0 5px #7e3491;
}
 
.button9:active {
  background-