19

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.

0

8 Answers 8

17

It should be

<input type="image" id="myimage" src="[...]" />

So "image" instead of "submit". It will still be a button which submits on click.

If your image is bigger than the button which is shown; let's say the image is 200x200 pixels; add this to your stylesheet:

#myimage {
    height: 200px;
    width: 200px;
}

or directly in the button tag:

<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />

Note however that resizing the image like this might not yield ideal results; if e.g. your image is much smaller than you want it to be shown, you will see the single pixels; if on the other hand it is much bigger, you are wasting precious bandwidth of your users. So resizing the picture itself to the actual size is preferrable over rescaling via stylesheets!

4
  • 1
    @rizvan It's working - post your code (edit your question) and we'll see where you got it wrong. Dec 13, 2011 at 11:10
  • 3
    @rizvan: by "not working", what do you mean exactly? Is the image not showing up, or is it not clickable, ...?
    – codeling
    Dec 13, 2011 at 11:18
  • 2
    ya its clickable and portion of image only visible
    – Rizvan
    Dec 13, 2011 at 11:19
  • 1
    So your problem is the size of the button? Try adding some css (see changed answer)
    – codeling
    Dec 13, 2011 at 11:22
17

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>
1
  • 2
    "<button> elements are much easier to style than <input> elements. You can add inner HTML content (think <em>, <strong> or even <img>), and make use of :after and :before pseudo-element to achieve complex rendering while <input> only accepts a text value attribute." Source: MDN
    – ruhong
    Dec 10, 2015 at 6:12
7

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.

3
  • 1
    Or create a class in your CSS Stylesheet file and use that ;o) Dec 13, 2011 at 11:03
  • 1
    if i use ur code it take portion of my image not whole image and i tried with width & height for button ...Nope not working
    – Rizvan
    Dec 13, 2011 at 11:10
  • 1
    it takes a lot of time but ya ll try for that .. thanks dude:)
    – Rizvan
    Dec 13, 2011 at 11:12
5

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

3

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

1
  • 1
    But the question was how to put an image on a button (or, effectively, how to use an image as a button).
    – nnnnnn
    Dec 13, 2011 at 11:16
2

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

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

it works.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.