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
CSS: Fix The Height of a Section Within a Variable Height Element
Multiple Navbars on The Same Page with Twitter's Bootstrap 3
Style The Tawk.To Chat Widget with My Custom CSS
CSS - Successive Indenting of Siblings After Headings
How to Get Linear Gradient Effect on Mozilla Firefox
Free Tools to Speed Up Web Development
Globally Changing Default Style in Primefaces
One CSS File or Individual CSS Files for Each Page
How Would You Write Media Queries for Multiple Screen Sizes
How to Set SCSS Variable to CSS Variable
How to Make a Pie Chart in CSS
Create a Rotating Cube with Only CSS
When Does a Box Establish an Inline Formatting Context
CSS Multi Line Ellipsis Cross Browser
CSS How to Only Make Bold Fonts for First <Ul> Set
Make a Div Display Under Another Using CSS in a Totally Fluid Layout