Style button when :active different from :hover

Question

I want to make a button that displays a background color when hovering and a button color without a background color when the button is down. Here is my current code:

Answer 1

You have to set a new background color on :hover state

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active {
   fill:#1a82b8;
   background-color:#000000;/*You can put the color you want*/
}

Pseudo states inherit values. For consistency purposes, it is best to only declare the styles which you are changing in your pseudo state rules.

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!