CSS Rollover image for Input or Submit buttons?

[Skipjackrick]

I have searched and tried editing the code and just can't seem to figure out how to get image rollovers to work with an "input" or "submit" button.

 

Does anybody know how to get this to work for an "input" button?  I've done this a thousand times for menu buttons that are links.  But never an input?

 

 

<input name="submit" type="image" src="layout/images/buttons/register.png" alt="register" />

[Skipjackrick]

OK, I am getting closer.  I have played around with it and now I've got this kind of working....

 

Problem is, the word "Submit" is displayed over my background.  However, the image rollover works well. 

 

<input type="submit" value="Submit" class="button" />

 

.button {
    border: none;
    width: 123px;
    height: 30px;
    background: url(images/buttons/register.png) no-repeat top left;
}

.button:hover {
background-position: -123px 0;
}

[vinpkl]

 

<input type="submit" value="Submit" class="button" />

 

 

write value="" instead of value="submit".

<input type="submit" value="" class="button" />

 

 

vineet

[Skipjackrick]

 

 

write value="" instead of value="submit".

<input type="submit" value="" class="button" />

 

 

vineet

 

Aye, thanks.  So simple.  I would usually catch that but I am tired.  Need sleep...Do you happen to know if my solution is cross browser friendly?  It seems to work in IE8 and Firefox just fine.

[vinpkl]

hover property doesnt works in ie6 for input butons.

 

rest all latest browsers support it.

 

vineet

[Skipjackrick]

Cool, thanks