How to change an input button image using CSS

Question

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.

Like so:

<button type="submit" style="border: 0; background: transparent">
 <img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>

More info

div.myButton input {
  background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
  background-size: 90px;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: none;
}

<div class="myButton">
  <INPUT type="submit" name="" value="">
</div>

This will work anywhere, even in Safari.

This article about CSS image replacement for submit buttons could help.

"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input.

And since button borders are erased, it's also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users."

The CSS code:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Here's a simpler solution but with no extra surrounding div:

<input type="submit" value="Submit">

The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Source: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

Here is what worked for me on Internet Explorer, a slight modification to the solution by Philoye.

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

You can use blank.gif (a one-pixel transparent image) as the target in your tag:

<input type="image" src="img/blank.gif" class="button">

And then style background in CSS:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}