Search code examples
cssgwt

How can I extend a CSS class with additional rules?

I want to create different button styles, which should only differ in the color. So I'd thought I make a base CSS class for the button, and inherit them and just override the color (at least that would be my approach from the Java perspective...).

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

.myButton-ok {
  background: green;
}

.myButton-warn {
 background: orange;
}

But how can I make these classes extend the .myButton class, so that I only have to apply eg .myButton-ok and all other base button styles are maintained?

Solution

  • Add an additional class to the button to take effect. Something like this- 

    .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