html - CSS is there something like a "class subclass"? -

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

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

This is working properly, but I find some uncomfortable restart code. Is there a very easy way to define most properties for all inputs (border, padding, width ...), and then specify background-color, one for each input?

HTML

  & lt; Input type = "text" class = "btn red" value = "red" & gt; & Lt; Input type = "text" class = "btn green" value = "green" & gt; & Lt; Input type = "text" class = "btn blue" value = "blue" & gt; & Lt; Input type = "text" class = "btn black" value = "black" & gt; & Lt; Input type = "text" class = "btn orange" value = "orange" & gt;  

css

  .btn {borders: 1 px solid gray; Width: 50px; Height: 10px; Padding: 10px; Margins: 10px; } .red {background-color: red; } .Green {background color: green; } .blue {background color: blue; }. Black {background color: black; White color; }. Orange {background color: orange; }  

here