Css button:focus
<p>I want to add focus to my buttons so when someone clicks on one, it'll change color<br>
I tried <code>.button:focus</code> but nothing happens</p>

<p>Here's my snippet.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;

}

.button {
  padding:0;
  margin:0;
  border:none;
  font-size:14px;
  background:#333;
  color: grey;
  height:50px;
  width:134px; 
  font-variant:small-caps;
}

.button:hover {
  padding:0;
  margin:0;
  border:none;
  font-size:14px;
  background:#333;
  color: #FF0000;
  height:50pxpx;
  width:134px; 
  text-decoration:none;
  font-variant:small-caps;
  background-color: #111;
}

.button:focus {
  background:blue;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action='' method="POST"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;input type="submit" name="login" class="button" value="Login In"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;input type="submit" name="prodcuts" class="button" value="Products"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;input type="submit" name="question" class="button" value="Question"&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>