css 按钮九宫格

CSS按钮九宫格是一种常用的设计模式，可以用来创建各种类型的按钮。这种设计模式的灵活性非常高，可以满足各种需求。

.button {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  Box-shadow: inset 0 1px 0 rgba(0,.2);
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease-in-out,border-color .2s ease-in-out,Box-shadow .2s ease-in-out;
}

.button:hover,.button:focus {
  background-color: #f5f5f5;
  border-color: #999;
  Box-shadow: inset 0 1px 0 rgba(0,.2),0 1px 2px rgba(0,.05);
}

.button.active,.button:active {
  background-color: #ebebeb;
  border-color: #999;
  Box-shadow: inset 0 1px 0 rgba(0,.05);
}

.button.disabled,.button[disabled] {
  opacity: .6;
  cursor: not-allowed;
}

.button.primary {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.button.primary:hover,.button.primary:focus {
  background-color: #286090;
  border-color: #204d74;
}

.button.primary.active,.button.primary:active {
  background-color: #204d74;
  border-color: #122b40;
}

.button.success {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.button.success:hover,.button.success:focus {
  background-color: #449d44;
  border-color: #398439;
}

.button.success.active,.button.success:active {
  background-color: #398439;
  border-color: #255625;
}

.button.warning {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #eea236;
}

.button.warning:hover,.button.warning:focus {
  background-color: #ec971f;
  border-color: #d58512;
}

.button.warning.active,.button.warning:active {
  background-color: #d58512;
  border-color: #985f0d;
}

.button.danger {
  color: #fff;
  background-color: #d9534f;
  border-color: #d43f3a;
}

.button.danger:hover,.button.danger:focus {
  background-color: #c9302c;
  border-color: #ac2925;
}

.button.danger.active,.button.danger:active {
  background-color: #ac2925;
  border-color: #761c19;
}

代码中使用了基本的 CSS 样式和颜色，可根据需求进行修改。对于九宫格中的按钮，可以使用不同的 class 名称来控制不同的样式。