Elliot Yap Elliot Yap - 1 month ago 6
CSS Question

how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)

I'm using semantic, they've colours class as below.

<button class='ui red button'> hover me to change red </button>


It show a red button with different shade when :active :hover and default state.

However I want the class colours only show on :hover state;
when not hover the button is overwrite grey colour.

Can this be done by adding one CSS class?

note: I don't want to duplicate every semantic colours class to achieve this result

Answer

Example:

.button:not(:hover) {
  color: white;
  background: green;
}

.button {
  background: red;
  color: #fff;
}
<button class='ui red button'> hover me to change red </button>