Question

I have successfully replaced the button with the image. But it appears that the image is placed on top of the button. I don’t wish to put inside my CSS as there are other styles overlapping it and I don’t want to have any redirect pages.

<button type="reset"><img src="images/cancel.png" width="15"></button>

Answer 1

Do this in CSS!

button {
  background-image: url(images/cancel.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  /* put the height and width of your image here */
  height: 50px;
  width: 200px;
  border: none;
}

button span {
  display: none;
}

Then your button is:

<button type="reset" title="In some browsers, this appears as a tooltip"> 
    <span>Cancel</span></button>

You may also add specifiers to override default button behaviors – for example -webkit-appearance: none; but I believe that’s enough to do what you need.