Using Images Inside <Button> Element

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.

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

How to make a button with image inside?

change this to increase size

<img src="./images/img04.jpg" width="28" height="28" alt="Sample Image"/>Submit</button>

to change size change width=" " and for height=" "

button {   color: #900;   border: 1px solid #900;   font-weight: bold;   width: 200px;   height: 100px; }
 button img {   margin-right: 5px;   vertical-align: middle; }

<button class="btnExample" type="submit" value="Submit">    <img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" width="58" height="58" alt="Sample Image"/>Submit</button>

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

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>

align text and images inside the button image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      button {
        /* padding-top: 100px; */
        width: 100%;
        border: none;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url("https://www.searchpng.com/wp-content/uploads/2019/01/Game-Button-PNG-copy.jpg");
        height: 100%;
        max-width: 1400px;
    margin: 0 auto;
    position: relative;
      }
     button span {
    text-align: left;
    position: absolute;
    left: 20%;
    color: white;
    top: 29px;
}
button img{position: relative;
    right: -28%;}
    </style>
  </head>
  <body>
        <button type="button">
          <span>test</span>
          <img
            src="https://cdn.iconscout.com/icon/free/png-256/metamask-2728406-2261817.png"
            width="60"
          />
        </button>
    
  </body>
</html>

Trying to use an image and text inside a button

Just playing with CSS positioning here, make your div with the red background position: relative; and use absolute for your img tag

Demo

.btn img {  
    left: 50%;
    margin-left: -15px; /* 1/2 of total width of your img */
    top: 50%;
    margin-top: -15px; /* 1/2 of total height of your img */
    position: absolute;
} 

---

Demo 2 (Alternate way to do this, you won't need CSS positioning)

In the Demo 2, you won't need CSS positioning, just remove margin-right from .btn img and use text-align: center; on #btn_container, and lastly, apply margin-top to .btn img

---

I don't think that you will need a wrapping element for background-color, just apply to img tag, so if you don't want to use your wrapping element than refer the solution below ..

CSS

.btn img {  
    display: inline-block;
    vertical-align: middle;
    background: #f00;
    padding: 5px;
    border-radius: 5px;
}

HTML

<button class="btn">               
    <img  src="http://placehold.it/30x30" width="30" height="30"/>
    <span>Button link 1</span>
</button>

Demo 3

---

Related Topics