title: CSS button not maintaining focus formatting
body: <p>I'm attempting to make two buttons where, when one is focused, the other is unfocused. So far I have the following code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .btn {
      border: none;
      display: inline-block;
      background-color: inherit;
      font-size: 10px;
      cursor: pointer;
      font-weight: 100;
      text-decoration: underline;
      color: blue;
    }
  
    .btn:focus {
      border: none;
      background-color: inherit;
      font-size: 10px;
      color: dimgrey;
      cursor: pointer;
      display: inline-block;
      font-weight: 100;
      text-decoration: none;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="this.disabled=true;document.getElementById('down7913').disabled=false;" type="submit" class="btn positive" name="up7913" id="up7913" &gt;Full&lt;/button&gt;|
  &lt;button onclick="this.disabled=true;document.getElementById('up7913').disabled=false;" type="submit" class="btn negative" name="down7913" id="down7913" &gt;Short&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>However, the focused formatting is only applied while the button is being actively pressed. After the button is released, the unfocused formatting is applied immediately. I know that the html does what I want it to do (found <a href="https://stackoverflow.com/questions/11112537/disable-button-onclick-but-enable-another-button/11112666">here</a>). So how do I get the focused formatting to persist? <a href="http://jsfiddle.net/m7nz3f0a/" rel="nofollow noreferrer">jsfiddle</a></p>