bootstrap 3 button hover/focus state
Solution 1
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;
}
Solution 2
Instead of overriding the styles just make the click event .blur() from jquery. It will remove focus on click and problem solved!
Solution 3
Anyone looking for Bootstrap 4, try this in your custom style CSS file
.btn-dark:hover, .btn-dark.active {
background: #31bda5;
box-shadow: none;
}
kerafill
Updated on December 02, 2020Comments
-
kerafill over 3 years
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; }
-
kerafill about 10 yearsThanks! Sometimes, I'm wary as to download again a customized version or wondering if there is just a simple css override.
-
kerafill about 10 yearsI 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.
-
Vinnie Pepi about 10 yearsDid you use :active or :focus? :active should fire when the mouse is depressed, focus should fire when you've tabbed onto the button.
-
kerafill about 10 yearsI changed :focus.
.btn-default:focus{background-color: #ffffff;}
The button appearance gets stuck in focus even when you mouseover it. -
Vinnie Pepi about 10 yearsYeah, that should work. If you use chrome, you can inspect the element. It even allows you to inspect the various states. See: stackoverflow.com/a/20716179/1402350
-
kerafill about 10 yearsUnfortunately, 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 about 10 yearsOkay, I seem to have made it work. After the
.focus
override, apparently, you need to redefine the.hover
style again. -
Tomasz Waszczyk almost 7 yearsThanks for the answer!!