Input button, single image rollover using 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