title: submit button stays hover color after clicked
body: <p>After I click the 'submit' or 'reset' button, the button color stays the hover color and does not return to the original "pre-clicked" button color until you click elsewhere in the page.</p>
  
  <p>I essentially want the button color to change back to the original color after it is clicked. Can anyone suggest how to do this?</p>
  
  <p>CSS/HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.form input:focus {
    background: #FFFFAD;
    outline: none;
  }
  .buttons {
    text-align: left;
  }
  .buttons input {
    font-size: 2.5em;
    font-weight: bold;
    font-family: "Arial", serif;
    padding: 8px 40px;
    background: #4470B6;
    border: 0px;
    margin-left: 0px;
    margin-right: 50px;
    margin-top: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    box-shadow: 0 0 4px rgba(0, 0, 0, .75);
    color: #FFFAFA;
  }
  .buttons input:hover,
  .buttons input:focus {
    background-color: #50627E;
    outline: none;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .75);
    box-shadow: 0 0 1px rgba(0, 0, 0, .75);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--  Details Form --&gt;
  
  &lt;section class="details"&gt;
    &lt;form id="form" action="test.php" method="post" autocomplete="on" target="_blank"&gt;
  
      &lt;div class="form"&gt;
        &lt;label&gt;First Name:&lt;/label&gt;
        &lt;input type="text" name="firstname" placeholder="First Name" autofocus /&gt;
      &lt;/div&gt;
  
      &lt;div class="buttons"&gt;
        &lt;input type="submit" value="Search"&gt;
        &lt;input type="reset" value="Reset"&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>