title: Button's bottom border disappears when i click somewhere else on the screen
body: <p><a href="https://jsfiddle.net/bbvxnsyo/" rel="nofollow">fiddle</a></p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
  &lt;button&gt;
      &lt;i class="fa fa-5x fa-motorcycle gobumpr_icon"&gt;&lt;/i&gt;
  &lt;/button&gt;
  &lt;button&gt;
      &lt;i class="fa fa-car fa-5x gobumpr_icon"&gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>button:focus {
      border-bottom: thick solid #FFA800;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      transition: width 2s;
      -webkit-transition: width 2s;
      outline: none;
      box-shadow: none;
  }
  </code></pre>
  
  <p>I want that border bottom to stay until the other button is being clicked.
  How can I do that?</p>