CSS is there something like a "class subclass"?

Question

I have 20 inputs in a page that are styled as buttons using the class property (that is, in the css I define borders, padding, width, etc).

But I want each one to have a different background color. In my current CSS I have 20 classes (one for each input) which are copies of all the style properties except for background-color.

It is working OK like this, but I feel somewhat uncomfortable repeting code. In there a very simple way to define most of the properties for all inputs (borders, padding, width...) and then specify the background-color, one for each input?

Answer 1

HTML

<input type="text" class="btn red" value="Red">
<input type="text" class="btn green" value="green">
<input type="text" class="btn blue" value="blue">
<input type="text" class="btn black" value="black">
<input type="text" class="btn orange" value="orange">

CSS

.btn{
    border:1px solid grey;
    width:50px;
    height:10px;
    padding:10px;
    margin: 10px;    
}
.red{
    background-color:red;
}

.green{
    background-color:green;
}

.blue{
    background-color:blue;
}
.black{
    background-color:black;
    color:white;
}

.orange{
    background-color:orange;
}

Here is the fiddle