Seamus McBrown Seamus McBrown - 1 month ago 5x
CSS Question

Make button stay one color except when hovered over

How can I make a button that changes color on

, then returns to its original color after it's been clicked?

The problem is that my button starts with a red gradient, then changes color when hovered over, then turns white after it's clicked. But I want it to return to red after it's been clicked, not white.

I thought I'd found the solution by adding
. This way, after the button was clicked, it returned to its original color while it was in focus. But then hovering doesn't change the button's color until focus is removed from the button.

I haven't found a combination of pseudo classes or javascript to keep this button red unless it's hovered over.


Per a comment by @webeno, I removed the CSS and tried a new approach using this javascript, but the button continues to work in its default style...

<button class = "btn">Go</button>
.red {background-color: #f00;

.blue {background-color: #00f;



The best way to do that for changing color on mouse hover, you just use CSS.

.btn, .button:focus, .btn:active {background-color: #00f;}

.btn:hover {background-color: #f00;}