Reputation: 95
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
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
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
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
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
Reputation: 106078
you have 2 selectors:
:active when mouse is down
:focus when mouse is released if button keeps the focus.
Upvotes: 1