Question

I’m using bootstrap for a simple test webapp. I want a button to start off with the standard style (btn), and switch to the btn-danger style only on hover. I know this can be done with jquery or straight javascript, but I’m really not interested in that approach.

Can I do this in straight CSS without copying any of the bootstrap style code into my own CSS? Ideally, I’d like to be able to do something like this:

.mybutton {

}

.mybutton:hover {
  style: btn-danger;
}

http://jsfiddle.net/wPDCm/5/

Answer 1

This can’t be done without a CSS pre-processor.

Using SASS you could do something like:

@mixin danger-will-robinson {
  background-color: red;
}

.btn-danger {
  @include danger-will-robinson;
}

.mybutton:hover {
  @include danger-will-robinson;
}

Other CSS preprocessors have similar features.