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. /?#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;
}

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;
}

• javascript
• html
• css
• twitter-bootstrap-3

• 1 As bootstrap recommends, add a custom stylesheet after the bootstrap stylesheet and define .btn:active as something else: getbootstrap.com/getting-started/#customizing – bozdoz Commented May 15, 2014 at 2:10
• 1 In addition if you want to have different styling for the hover and focus, define .btn-default:hover and .btn-default:focus (or with .btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning) – grim Commented May 15, 2014 at 2:13

3 Answers 3

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;
}

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

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

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