CSS button not maintaining focus formatting

Question

I'm attempting to make two buttons where, when one is focused, the other is unfocused. So far I have the following 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;
  }

<button onclick="this.disabled=true;document.getElementById('down7913').disabled=false;" type="submit" class="btn positive" name="up7913" id="up7913" >Full</button>|
<button onclick="this.disabled=true;document.getElementById('up7913').disabled=false;" type="submit" class="btn negative" name="down7913" id="down7913" >Short</button>

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 here). So how do I get the focused formatting to persist? jsfiddle

Answer 1

In CSS try,

  .btn:focus, btn:active {
    border: none;
    background-color: inherit;
    font-size: 10px;
    color: dimgrey;
    cursor: pointer;
    display: inline-block;
    font-weight: 100;
    text-decoration: none;
  }

Or, try this:

  .btn:disabled {
    border: none;
    display: inline-block;
    background-color: inherit;
    font-size: 10px;
    color: dimgrey;
    cursor: pointer;
    display: inline-block;
    font-weight: 100;
    text-decoration: none;
  }

.btn:disabled is guaranteed to work.