bootstrap 3 button hover/focus state
css, html, javascript, twitter-bootstrap-3
Solution
You can override the bootstrap styles. First make sure your stylesheet or style declaration is added after bootstrap, 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;
}
Problem
Bootstrap 3's buttons' hover state looks exactly the same with its focus state. Is there a way to change this? I know it's just a cosmetic issue, but I want the hover state to go away when the mouse hovers away, yet still have another distinct feature to know the button has focus. I don't know if this is my browser's issue or it is really intended (or a bug?). I'm using Chrome latest. (Version 34.0.1847.131 m) Link to Bootstrap 3 button samples. http://getbootstrap.com/css/?#buttons-tags Click on the 3rd button labelled "Input" and move mouse out. -- Update: I've tried overriding the default focus/hover styles, but now the button is stuck in the focus state even when you mouseover it. Is there a way to get over this? It seems the focus state has higher priority in styles than hover. -- Thanks for the pointers guys. For the intended behavior of still having a distinct hover state despite being in focus, the hover state needed to be redefined again. The css I added went like this: ``` .btn-default:focus, .btn-default:active, .btn-default.active { background-color: #ffffff; } .btn-default:hover { background-color: #ebebeb; } ```