Elliot Yap Elliot Yap - 1 year ago 72
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 Source


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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download