[javascript] How to put a jpg or png image into a button in HTML

I want a button with an image in it. I am using this:

<input type="submit" name="submit" src="images/stack.png" /> 

But it does not show the image. I want the whole button to be the image.

This question is related to javascript html

The answer is


Use <button> element instead of <input type=button />


<a href="#">
        <img src="p.png"></img>
    </a>

This may work for you, try it and see if it works:

<input type="image" src="/library/graphics/cecb2.gif">

You can style the button using CSS or use an image-input. Additionally you might use the button element which supports inline content.

<button type="submit"><img src="/path/to/image" alt="Submit"></button>

you can also try something like this as well

<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">

and CSS class

.fwm_button {
   color: white;
   font-weight: bold;
   background-color: #6699cc;
   border: 2px outset;
   border-top-color: #aaccff;
   border-left-color: #aaccff;
   border-right-color: #003366;
   border-bottom-color: #003366;
 }

An example is given here


You can use some inline CSS like this

<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />

Should do the magic, also you may wanna do a border:none; to get rid of the standard borders.


<input type= "image" id=" " onclick=" " src=" " />

it works.