仅当单击CSS时，如何才能更改按钮的颜色？

Question

I know there is an Active state but this appears and stays after I click on the button. Is there a way I can change the color of the button with CSS to show when the mouse is over the button and clicked only.

What I was thinking is something like a CSS selector for Focus and Active at the same time. Is there such a thing or way I could do this. This would be something like I see with the button on Stackoverflow but with a change in color when clicked that goes away when I move the cursor away.

Answer 1

What I get from your question is that you want a button to change its colour once it has been clicked? If so you can try using JQuery which adds a css() function that allows you to change properties of elements. So, to change the background colour of a button once it has been clicked you could adapt the following code:

 $("button").click(function(){ $(this).css("background-color", "red"); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Or else just use plain CSS:

button:hover:focus

Hopefully this helps!

Answer 2

Please check below examples and see if this is what you want.

JSFiddle1

 input { background: #2e9ec7; } input:active { background: #2fa832; } 

 <input type="submit"></input> 

JSFiddle2

 input { background: #2e9ec7; } input:hover, input:active { background: #2fa832; } 

 <input type="submit"></input> 

Hope this helps.

Answer 3

Use mouseup and mousedown events if you can use jquery. On mousedown event set color of the button and on mouseup event set the color back to what is was before clicking it.

Answer 4

<input type="submit">
input {
    background: blue;
}
input:active {
    background: red;
}

When it's active, the color would be red. Except for that moment, it will be blue. Also, you could change only the text color by setting the color property instead of the background one.