title: bootstrap 3 button hover/focus state
body: <p>Bootstrap 3's buttons' hover state looks exactly the same with its focus state.</p>
  
  <p>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.</p>
  
  <p>I don't know if this is my browser's issue or it is really intended (or a bug?).</p>
  
  <p>I'm using Chrome latest. (Version 34.0.1847.131 m)</p>
  
  <p>Link to Bootstrap 3 button samples.
  <a href="http://getbootstrap.com/css/?#buttons-tags">http://getbootstrap.com/css/?#buttons-tags</a></p>
  
  <p>Click on the 3rd button labelled "Input" and move mouse out.</p>
  
  <p>--</p>
  
  <h2>Update:</h2>
  
  <p>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.</p>
  
  <p>--
  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.</p>
  
  <p>The css I added went like this:</p>
  
  <pre><code>.btn-default:focus,
  .btn-default:active,
  .btn-default.active
  {
    background-color: #ffffff;
  }
  
  .btn-default:hover
  {
    background-color: #ebebeb;
  }
  </code></pre>