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:

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
    fill:#1a82b8;
}

The problem with the above code is that it turns the icon a color when :active but doesn't remove the background color set by :hover. How do I remove the background color?

Setting a new background property in :active? – Emilio Gort Sep 20 '13 at 00:24 — Emilio Gort, Sep 20 '13 at 00:24

Emilio Gort · Accepted Answer · 2017-04-04T14:30:48.273

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!

score 2 · Answer 2 · answered Sep 20 '13 at 00:30

2

How about this?

I would guess, its cause on the first property you are using background-color and the second fill.

button:hover {
    background-color: red;
}
button:active {
    background-color: blue;
}

jsFiddle working example (1)

answered Sep 20 '13 at 00:30

Nikk

6,581
8
36
69

Background color is to color the div's background; fill is to color the svg icon inside the div. – Keavon Sep 20 '13 at 00:52

score -1 · Answer 3 · answered Oct 09 '20 at 11:43

-1

`button:hover{background-color: transparent;color: yellow;}

button:active {background: white;color: black;}`

answered Oct 09 '20 at 11:43

Samuel Archibong

1
2

Style button when :active different from :hover

3 Answers3

Linked

Related