html - Change HTML5 button color when active -

i want change color of button when active or clicked. have tried following html5 , css3 codes have not been able achieved 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; /* 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 using chrome development, can me?

in css use selectors in order define elements want configure. these selectors must match targeted elements.

if use selector

button.submit:active 

you're looking "button" element has class "submit" , active. there no such element in html code.

i have not time give explanation of possible selectors of css3. there tutorials. example:

https://developer.mozilla.org/en-us/docs/web/guide/css/getting_started

change css code match input elements , add class 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; /* 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;                }