CODEWITHSUNDEEP
htmlcss
faisal abdulai
faisal abdulai

Reputation: 3819

Change HTML5 button color when active

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?

Upvotes: 1

Views: 741

Answers (2)

Peter Paul Kiefer
Peter Paul Kiefer

Reputation: 2134

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

Upvotes: 3

Bud Damyanov
Bud Damyanov

Reputation: 31889

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

input.submit:active, input.reset:active {....}

Upvotes: 1

Related Questions