Input button, single image rollover using CSS - css

Question

When Googling this hurdle, it came up with a ton of info about how to apply css and different static buttons as rollovers, when using an image as a button in a form.
My question is, how would you go about changing the button for each mouse event (on the button) and if you are using ONE image for all states?
For example... I have the following HTML for my button
<input type="image" id="login_submit" name="login_submit" src="button_login.png" />
and seperate to this I have the following CSS that I used before...
#login_submit a {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit a:hover {
background-position: -141px 0;
}
#login_submit a:active {
background-position: -282px 0;
}
now obviously it won't work at the moment... so how would I go about it? I'm looking for a more 'pure' CSS solution so no JS to brighten the day.
or should I stick with having 2/3 separate buttons for each state?

Answer 1

Well the main problem seems to be that you are trying to style an anchor that is a child to "#login_submit" instead of just "#login_submit", try this:
#login_submit {
outline: none;
text-indent: -5000px;
display:block;
margin-left: auto;
margin-right: auto;
width: 141px;
height: 36px;
background: url("button_login.png") 0 0 no-repeat;
}
#login_submit:hover {
background-position: -141px 0;
}
#login_submit:focus {
background-position: -282px 0;
}
Good luck,
Leo

Answer 2

I had this problem too, but just solved it.
By using an input type="image" and adding a 1x1px blank (transparent) .png or .gif to the src of the form element. Then using CSS for setting the background as the double (or, in the above case, triple) rollover image. The form element uses the blank .png as image, but beneath it lies the CSS handled background image, showing a beautifully working rollover with submit button functionality across its height and width.
=)
Code is taken directly from my situation:
HTML:
<div class="formrow">
<input id="send" type="image" src="../blank.png" name="Submit" onclick="submit" alt="Send" />
</div>
CSS:
#send
{
height: 25px;
width: 107px;
overflow: hidden;
display: block;
float: right ;
background: url('../images/style/button-send.png');
}
#send:hover
{
background-position: 0 -25px;
}
I hope this helps. =)
By the way, for me this approach took care of the problems mentioned by svict4 as well. =)