title: Pressed <button> selector
body: <p>I'd like to create a <code>button</code> that changes its style when it gets pressed. This is my CSS 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>button {
      font-size: 18px;
      border: 2px solid gray;
      border-radius: 100px;
      width: 100px;
      height: 100px;
  }
  
  button:active {
      font-size: 18px;
      border: 2px solid red;
      border-radius: 100px;
      width: 100px;
      height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;Button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is changed only when I click &amp; hold on it. I want to make it change style after it's pressed. For example, normal state would be white, state while being clicked would be green and after click is released it would be red.</p>