Bootstrap 3 hover / focus buttons

Question

The stuck state of Bootstrap 3 buttons looks exactly like the focus state.

Is there any way to change this? I know this is just a cosmetic problem, but I want the freeze state to disappear when the mouse goes down, but still there is another feature to know that the button has focus.

I do not know if this is a problem of my browser, or is it really intended (or an error?).

I use Chrome last. (Version 34.0.1847.131 m)

Link to Bootstrap 3 Button Samples. Http://getbootstrap.com/css/?#buttons-tags

Click on the third button labeled "Login" and mouse out.

-

Update:

I tried to override the default focus / guidance styles, but now the button is stuck in the focus state, even when you hover over it. Is there any way to overcome this? It seems that the focus state has a higher priority in styles than hovering.

- Thanks for the guys. For an alleged behavior that still has an excellent hover state, although it is in focus, the hover state needs to be redefined again.

The added css was as follows:

.btn-default:focus, .btn-default:active, .btn-default.active { background-color: #ffffff; } .btn-default:hover { background-color: #ebebeb; } 

Answer 1

You can override bootstrap styles. First, make sure that after deleting, a declaration of styles or styles has been added, for example:

 <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <link rel="stylesheet" href="/stylesheets/styles.css"> 

Then in your css:

 .btn:focus { background-color: red; } 

Answer 2

Instead of overriding styles, just make the click.blur () event from jquery. This will remove the focus on the click and solve the problem!

Answer 3

Anyone looking for Bootstrap 4, try doing this in your CSS style file.

 .btn-dark:hover, .btn-dark.active { background: #31bda5; box-shadow: none; }