Style Button When: Active Different from: Hover

Style button when :active different from :hover

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!

How do I combine active button and hover?

You can combine a .active class with a :hover pseudo-class in your CSS code like below. The .active class will darken the element and the :hover combined to .active will darken it even more.

button.active{  background-color:#aaa;}button.active:hover{ /* combine two conditions */  background-color:#999;}

<button type="button" class="active">An active button</button><button type="button" class="">A normal button</button>

Losing hover and active styles in HTML when change button background in javascript

Guessing due to the fact there is missing code in your example. The CSS in element style supersedes the class CSS so background and color in :hover wouldn't take effect. If you clear the inactive state with blank string, the :hover in the css class should work again.

function selectEditor() {
//Changes background to white and font color to red (inactive state)
btnAutor.style.background = "";
btnAutor.style.color = "";

//Changes background to red and font color to white (active state)
btnEditor.style.background = "var(--mRed)";
btnEditor.style.color = "white";

//Changes background to white and font color to red (inactive state)
 btnMiembro.style.background = "";
 btnMiembro.style.color = "";
}

How to style a clicked button in CSS

This button will appear yellow initially. On hover it will turn orange. When you click it, it will turn red. I used :hover and :focus to adapt the style.
(The :active selector is usually used of links (i.e. <a> tags))

button{  background-color:yellow;}
button:hover{background-color:orange;}
button:focus{background-color:red;}
a {  color: orange;}
a.button{  color:green;  text-decoration: none;}
a:visited {  color: purple;}
a:active {  color: blue;}

<button>Hover and Click!</button><br><br>
<a href="#">Hello</a><br><br><a class="button" href="#">Bye</a>

CSS help: active button not changing style

The state active is only set for the duration of the click.

button:active {background-color: red;}

<button >Click me</button>

---

Related Topics