using images inside <button> element

Question

I am trying to include an image and some text inside a button element. My code is as follows:

Answer 1

Background Image Approach

You can use a background image and have full control over the image positioning.

Working example: http://jsfiddle.net/EFsU8/

BUTTON {
    padding: 8px 8px 8px 32px;
    font-family: Arial, Verdana;   
    background: #f0f0f0 url([url or base 64 data]);
    background-position: 8px 8px;
    background-repeat: no-repeat;
}​

A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/

And another example showing adjustments to the button based on the :hover and :active states.

Child Element Approach

The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/

This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.

Answer 2

Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.

Answer 3

Change button display style to inline-block, img float to left. Add margin to img as necessary.

<button style="display:inline-block">
  <img src="url" style="float:left;margin-right:0.5em">Caption
</button>

Answer 4

If you want to use image inside the button not in the CSS I think this help you:

http://jsfiddle.net/FaNpG/1/