CSS Button :focus pseudo class

Question

How Would I make it so that when I click a button, the button stays that color until another button is clicked?

To clarify, imagine you have a text box. When you click it, you can add a border because you have it like input:focus{border:#000} and when the input loses focus or another text box is clicked, the border properties go back to the default.

How would I accomplish this with a button. I feel like I'd need to use :after or something.

My Code

button.top_bar {
    background-color:#E3E3E3;
    border:#DCDCDC 1px solid;
    border-radius:3px;
    height:40px;
    display:block;
    color:#000;
    postion:relative;
    display:block;
    float:left;
    top:5;
    text-transform:capitalize;
    font-family:Arial;
    font-weight:bold;
    cursor:pointer;
    margin-left:15px;
}

button.top_bar:hover {
   border:#9F9F9F 1px solid;
}

button.top_bar:focus {
    border:#9F9F9F 1px solid;
}

Answer 1

Unlike text inputs, some browsers don't seem to grant focus when button elements are clicked. Add to your button element an attribute onclick="this.focus()" to force the issue. No jQuery needed :-)