Embed Image in a ≪Button≫ Element

Embed image in a button element

You could use input type image.

<input type="image" src="http://example.com/path/to/image.png" />

It works as a button and can have the event handlers attached to it.

Alternatively, you can use css to style your button with a background image, and set the borders, margins and the like appropriately.

<button style="background: url(myimage.png)" ... />

How to add image in a button html

You can do this:

<button class='project_button'>Modular FPS Template <img src='../Images/Projects/Modular-FPS.png' /></button>

Move your image inside the button.

using images inside button element

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.

How to add image to button via Javascript?

I don't know if this is what you need..

<button id="button"></button>

<script type="text/javascript">
    var buttons = document.getElementById("button");
    buttons.innerHTML = '<img src="images\ok.png" />';
</script>

how to put an image inside a button? using html and css only

You can try this:

<button class="buttoni" style="width: 270px; height: 46.9px;">Earn Money Helping <b>People</b><img src="img/pla.png" style="position: relative; float: right; width: 25px;"></button>

Adjust the height as needed for the image.

Are you just trying to learn HTML/CSS, I'd suggest putting the styling into a stylesheet rather than inline.

Putting Images Inside a BUTTON Element (HTML & CSS)

Here is how to do it

The Theory

Block elements (like DIV) although displayed in order of creation, will position themselves adjacent to the previous element or when short of space, on the next line. Because we dont want to give the button a width (we want the button to be automatically sized based on the content of the button) the block elements continued to appear on the next line (see IE8 image in the question above). Using white-space:nowrap forces inline elements (like SPAN and EM) to be displayed on the same line, but is ignored by block elements, hence the solution below.

CSS

button{
    margin: 0px;
    padding: 0px;
    font-family:Lucida Sans MS, Tahoma;
    font-size: 12px;
    color: #000; 
    white-space:nowrap;
    width:auto;
    overflow:visible;
    height:28px;
}

button em{
    vertical-align:middle;
    margin:0 2px;
    display:inline-block;
    width:16px;
    height:16px;
    background-image: url(images/ui-icons_3d3d3d_256x240.png);      
}

button em.leftImage{
    background-position: -96px -112px;
}

button em.rightImage{
    background-position: -64px -16px;
}

HTML

<button><em class="leftImage"></em>Button<em class='rightImage'></em></button>

The Result

Internet Explorer 6, 7, 8 and Firefox 1.5, 2, 3

How to put an image inside a button that created in javascript?

You can't give a src to a button element. Try to put an <img> element inside the button:

<button type="button" class="btn btn-danger btn-md action" id="checkId2">
    <img src="Images/TestPicture.png"/>
</button>

HTML / CSS How to add image icon to input type= button ?

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.

Making an image act like a button

It sounds like you want an image button:

<input type="image" src="logg.png" name="saveForm" class="btTxt submit" id="saveForm" />

Alternatively, you can use CSS to make the existing submit button use your image as its background.

In any case, you don't want a separate <img /> element on the page.

---

Related Topics