6

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;
}
GôTô
  • 7,974
  • 3
  • 32
  • 43
kerafill
  • 274
  • 1
  • 4
  • 14
  • 1
    As bootstrap recommends, add a custom stylesheet after the bootstrap stylesheet and define `.btn:active` as something else: http://getbootstrap.com/getting-started/#customizing – bozdoz May 15 '14 at 02: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 May 15 '14 at 02:13

3 Answers3

8

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;
}
Vinnie Pepi
  • 166
  • 4
  • Thanks! Sometimes, I'm wary as to download again a customized version or wondering if there is just a simple css override. – kerafill May 15 '14 at 03:16
  • I tried overriding it using this, but when I mouseover the button, the hover state doesn't appear anymore. It's stuck in the active state. – kerafill May 15 '14 at 03:25
  • Did you use :active or :focus? :active should fire when the mouse is depressed, focus should fire when you've tabbed onto the button. – Vinnie Pepi May 15 '14 at 03:30
  • I changed :focus. `.btn-default:focus{background-color: #ffffff;}` The button appearance gets stuck in focus even when you mouseover it. – kerafill May 15 '14 at 03:34
  • Yeah, that should work. If you use chrome, you can inspect the element. It even allows you to inspect the various states. See: http://stackoverflow.com/a/20716179/1402350 – Vinnie Pepi May 15 '14 at 03:38
  • Unfortunately, it didn't work the way I expected it to be. Because once the button has focus, even when I moused over it, it didn't change appearance to hover state. It was stuck in focus state appearance. – kerafill May 15 '14 at 03:43
  • 2
    Okay, I seem to have made it work. After the `.focus` override, apparently, you need to redefine the `.hover` style again. – kerafill May 15 '14 at 03:50
2

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

Dan
  • 21
  • 1
2

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

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