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:

<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.

Tim M. · Accepted Answer · 2012-03-06 04:24:40Z

24

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.

edited Mar 6, 2012 at 4:24

answered Mar 6, 2012 at 2:02

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

robert smith Over a year ago

Thank you for the answer. I thought I read that you can't resize an image in the background. Am I mistaken? Thanks again.

Tim M. Over a year ago

@robertsmith - I think I misunderstood your question initially. I've updated my answer with more examples. Let me know if this works for you.

robert smith Over a year ago

Your first answer was great, and your edit with all those examples is fantastic! Your examples show me exactly how to code all of the button types I had in mind. Thanks for taking the time.

WORMSS Over a year ago

Is there a way to add the image but keep the default styling of the button? When I put a background-image on the silver style vanishes and you get this horrible flat box. I've went back to a button with a image tag inside it as a fall back.

Ferdinand Liu · Accepted Answer · 2012-03-06 02:22:20Z

14

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>

answered Mar 6, 2012 at 2:22

Ferdinand Liu

3442 silver badges3 bronze badges

Comments

Jay · Accepted Answer · 2012-03-06 02:07:25Z

6

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

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

answered Mar 6, 2012 at 2:07

Jay

1,4041 gold badge18 silver badges30 bronze badges

Comments

Drakekin · Accepted Answer · 2012-03-06 01:58:11Z

0

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.

answered Mar 6, 2012 at 1:58

Drakekin

1,3481 gold badge11 silver badges24 bronze badges

Collectives™ on Stack Overflow

using images inside <button> element

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related