CODEWITHSUNDEEP
htmlcssbutton
robert smith
robert smith

Reputation: 981

using images inside <button> element

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

<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>

The CSS is:

.testButton1
{
font-size:100%;
height:10%;
     width: 25%
}

.testButton1 img
{
height:80%;
vertical-align:middle;
}

What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using &nbsp works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.

What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.

Any help, as always, is appreciated. Thank you.

Upvotes: 30

Views: 123049

Answers (4)

Tim M.
Tim M.

Reputation: 54417

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.

Upvotes: 24

Ferdinand Liu
Ferdinand Liu

Reputation: 334

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>

Upvotes: 13

Jay
Jay

Reputation: 1404

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

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

Upvotes: 6

Drakekin
Drakekin

Reputation: 1348

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.

Upvotes: 0

Related Questions