CSS不是这样工作的。它不使用继承 * 本身 *。它使用基于选择器的特异性的级联来覆盖属性。唯一的方法是使用像LESS或SASS这样的预处理器，在那里你可以扩展它们。
对于原始CSS，我会分配两个类，一个是默认样式的按钮，另一个是特定样式的按钮：

<a class="myButton myButton-ok"></a>

向按钮添加一个附加类以使其生效。像这样的-

.myButton {
padding:...
width:...
background: white;
}

.red {
background: red;
}

.blue {
background: blue;
}

<button Class="myButton">Button</button>  // basic button
<button Class="myButton red">Button</button>  // with red BG
<button Class="myButton blue">Button</button>  // with blue BG

在CSS中，“强度”的顺序是这样的：
inline style > class > id。
所以你可以定义一个通用的类按钮：

.myButton {
padding:...
width:..};

为你的OK按钮定义一个内联样式（在html中）：

style="background:green"

或者，你可以为每个按钮定义一个特定的id样式，但是对于仅仅改变颜色，我认为这是矫枉过正：

#myButton-ok{ background: green};

CSS没有编程意义上的类或继承概念。它只有类选择器，可以让你用一个特定的class属性（一个HTML的东西）来指定元素的属性，它有一个完全不同意义上的继承：在某些情况下，元素从文档树中的父元素继承属性值（这与类无关）。
因此，我们需要以不同的方式思考。在您的示例中，您可以使用例如。

.myButton {
   padding:...
   width:...
   background: white;
}

.ok {
   background: green;
}

.warn {
   background: orange;
}

和像<button class="button warn">这样的标记。这意味着该元素属于两个类，并且应用了这两个类的声明。在这里，当其他条件相同时，如果同一属性的两个声明应用于一个元素，则后一个声明（即稍后出现在样式表中的声明）获胜。

在CSS中，你不能这样做。
然而，在这些类型的情况下，我们可以通过如下所示分离公共属性和特定属性来实现相同的目标：

.myButton, myButton-ok, myButton-warn {
   padding:...
   width:...;
   /*Other common properties, except specific ones like "background"*/
}

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}