Jump to content

CSS Rollover image for Input or Submit buttons?


Skipjackrick

Recommended Posts

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?

 

register.png

 


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

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;
}

 

 

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.