background image
HomeRecent PostsDrupalSearchTagsRSSContactAboutAccount

Replacing a submit button with an image using CSS

Eric.London's picture

I just created a new image to replace the generic submit button appearance, when I remembered the submit buttons are type submit, not type image. I decided to use some quick CSS instead. The trick is adding a background image to the submit button, and then *hiding* the button text by adding padding-top CSS that is greater than the height of the image, and adding "overflow: hidden" to ensure the text does not get pushed outside the button...

form#MYFORMID #edit-submit {
  height: 22px;
  width: 73px;
  background: url('images/button_submit.jpg') no-repeat;
  border: none;
  overfow: hidden;
  padding-top: 25px;
}

Thankx

..thankx a lot dude, it worked for me...kip goin

add some spice :

cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */