My webpage has navbar buttons and hover bg-color as orange and when I click on any of those button, it changes background color to orange and freezes being orange. How do I remove that thing?

I want those buttons to change background color to its original color after move cursor away from them.

Please view this image

CodePudding user response：

We won't be able to tell you why for sure without seeing the code, but my best guess is that you're setting the background color using both :hover and :focus. When you click on a link/button, it will gain focus which will cause the :focus state to remain until you click off of it to give something else focus.

CodePudding user response：

You can give these fetures to when mouse over.

yourbuttons:hover{
background-color: orange;
}

CodePudding user response：

I have had problems that are similar to this. I recommend trying something along the lines of this.

This is the button while it is not hovered:

.<yourbutton> {
    background-color: purple;
    cursor: pointer;
    transition: 0.3s;
}

.<yourbutton>:hover {
    background-color: purple;
    cursor: pointer;
    border-radius: 8px; (just to show the change.)
    transition: 0.3s;
}

The code above is basic CSS to show what will happen when the client hovers on the button the edges will be curved inward by 8 pixels in the time of 0.3 seconds.