submit button stays hover color after clicked

Question

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.

I essentially want the button color to change back to the original color after it is clicked. Can anyone suggest how to do this?

CSS/HTML:

.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);
}

<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>

Answer 1

i assume you are styling your button on focus in order to get rid of the outline, so simply split the selector into 2 and on focus remove only the outline:

.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
{
  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);
}
.buttons input:focus {
  outline: none;
}

<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>

Answer 2

You are very close to the solution. In order to achieve the effect you are looking for try using focus and active instead of hover and focus.

The active state is only triggered when the element is being clicked.

Here is what I did

.buttons input:focus {
  outline: none
}
.buttons input:active {
  border: 0;
  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);
}

You can check the full solution bellow:

.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:focus {
  outline: none
}
.buttons input:active {
  border: 0;
  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);
}

<!--  Details Form -->

<section class="details">
  <form id="form" action="test.php" method="post" autocomplete="on" target="_blank">

    <div class="form">
      <label>First Name:</label>
      <input type="text" name="firstname" placeholder="First Name" autofocus />
    </div>

    <div class="buttons">
      <input type="submit" value="Search">
      <input type="reset" value="Reset">
    </div>
  </form>
</section>

Answer 3

As i had same issue BUT on mobile. Mobile has thing called sticky hover. ended up @ media(hover: hover) styles. REFERENCED TEXT:

You could for example, define your normal :hover styles inside the media query (@media hover:hover{}) to restrict them to devices that support :hover fully (ones equip with a mouse or certain pointing devices):

 @media (hover:hover) {
    nav a:hover{
        background: yellow;
    }
}

or for a more progressive approach that leaves your original :hover styles untouched, target devices that don't support :hover completely:

@media (hover:none), (hover:on-demand) {
    nav a:hover{ /* suppress hover effect on devices that don't support hover fully
        background: none;
    }
}

Reference: http://javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

and this: How to prevent sticky hover effects for buttons on touch devices