CODEWITHSUNDEEP
htmlcss
Mounika Garrepalli
Mounika Garrepalli

Reputation: 95

how to change the color of button image on clicking?

Here is my code

Here i used "hover" of CSS to change the button image font color when mouse pointer is on button image...now i need to change the Image color OR font color when i click on button image...

So help me to give this requirement to my button image....

CSS code for button image :

        <style>
            .button {
                border: none;
                background: url('images/btn_login.jpg') no-repeat top left;
                color:white;
                padding: 2px 8px;
             }
             .button:hover {
                 border: none;
                 background: url('images/btn_login.jpg') no-repeat top left;
                 color:black;
                 padding: 2px 8px;
              }
           </style>

HTML code :

      <td width="84"><input name="login" class="button" id="" type="submit" value="Login" /></td>

Upvotes: 1

Views: 7665

Answers (5)

Falguni Panchal
Falguni Panchal

Reputation: 8981

<style>
            .button {
                border: none;
                background: url('images/btn_login.jpg') no-repeat top left;
                color:white;
                padding: 2px 8px;
             }
             .button:hover {
                 border: none;
                 background: url('images/btn_login.jpg') no-repeat top left;
                 color:black !important;
                 padding: 2px 8px;
         background-color:#F00 !important;
              } 
           </style>

Upvotes: 1

Aravind30790
Aravind30790

Reputation: 992

CSS:

            .button {
             border: none;
             background: url('images/btn_login.jpg') no-repeat top left;
             color:white;
             padding: 2px 8px;
             }
             .button:hover {
              border: none;
              background: url('images/btn_login.jpg') no-repeat top left;
              color:black;
              padding: 2px 8px;
              }
             .buttonhover {
              border: none;
              background: url('images/btn_login.jpg') no-repeat top left;
              color:black;
              padding: 2px 8px;
              }

Jquery:

$(".button").on('click',function(){
 $(this).removeClass('button');
$(this).addClass('buttonhover');
})

Upvotes: 0

edd
edd

Reputation: 1364

Try this

<td width="84"><input name="login" class="button" onclick="this.style.color = 'green';" id="id" type="submit" value="Login" /></td>

Upvotes: 3

Kevin
Kevin

Reputation: 6711

Use the following javascript code to change the color of the button class when clicked:

<td width="84"><input name="login" class="button" onclick="changeColor()" id="id" type="submit" value="Login" /></td>


<script>  
    function changeColor() {
        document.getElementById("id").style.color = "green";
    }   

</script>

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 106078

you have 2 selectors:

:active when mouse is down

:focus when mouse is released if button keeps the focus.

Upvotes: 1

Related Questions