title: CSS Button :focus pseudo class
body: <p>How Would I make it so that when I click a button, the button stays that color until another button is clicked?</p>
  
  <p>To clarify, imagine you have a text box. When you click it, you can add a border because you have it like <code>input:focus{border:#000}</code> and when the input loses focus or another text box is clicked, the border properties go back to the default.</p>
  
  <p>How would I accomplish this with a button. I feel like I'd need to use :after or something.</p>
  
  <h3>My Code</h3>
  
  <pre><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;
  }
  </code></pre>