Change HTML5 button color when active - html

Question

I want to change the color of my button when it is active or clicked. I have tried the following Html5 and css3 codes but have not been able to achieved my intentions.
HTML code:
<p class="submit">
<input type = "reset" />
<input type = "submit" />
</p>
CSS3 code:
button.submit:active , button.reset:active {
border: 2px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
background-color:blue; /* this is the line of interest */
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}
I am using Chrome for the development, can anyone help me?

Answer 1

In CSS you use selectors in order to define the elements you want to configure. These selectors must match the targeted elements.
If you use the selector
button.submit:active
you're looking for an "button" element that has a class "submit" and is active. But there is no such element in your html code.
I have not the time to give an explanation of all possible selectors of CSS3. But there are good tutorials. This for example:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
Change your CSS code to match input elements and add class to input elements.
<p>
<input type = "reset" class="reset"/>
<input type = "submit" class="submit"/>
</p>
input.submit:active , input.reset:active {
border: 2px solid #20911e;
box-shadow: 0 0 10px 5px #356b0b inset;
background-color:blue; /* this is the line of interest */
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
-o-box-shadow: 0 0 10px 5px #356b0b inset;
}

Answer 2

Give your buttons a class="submit" and class="reset" respectively. No JavaScript needed. Also change your CSS3 code:
input.submit:active, input.reset:active {....}