Insert image and text inside a submit button

Question

I'm trying to insert a text and a tiny image of an airplane to a submit button. Unfortunately, the text overlap on the image and I do not know how to align it. how can I "move" the text to the right of the button? There is a better way to do it? Thanks.

input[type="submit"] {
    width: 230px;
    height: 40px;
    border: none;
    background: url(../Images/Plane.png) #ff9900 no-repeat right;
    color: #fff;
    cursor: pointer;
}

and this is the HTML

<input type="submit" value="SEND" id="submitForm">

score 0 · Accepted Answer · answered Feb 03 '15 at 20:35

0

Just add this atribute:

text-align:right;

answered Feb 03 '15 at 20:35

score 0 · Answer 2 · edited May 23 '17 at 10:26

There is a duplicate to this question... HTML: How to make a submit button with text + image in it?

the gist of it is that the image should be in image tag instead of background tag which affects the position of the text and images. Try changing the background image to an image tag inside the button as having the image that is background acting separately from text doesn't make much sense to me.

score 0 · Answer 3 · answered Feb 03 '15 at 20:42

Rather than trying to balance padding and required alignment, how about just using a <button> element, which can perform 'button-like' actions and contain other (non-interactive) HTML entities:

<button type="submit" id="submitForm">
     <img src="../Images/Plane.png" /> Send
</button>

With the CSS:

#submitForm {
    width: 230px;
    height: 40px;
    border: none;
    background-color: #ff9900;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

#submitForm img {
    float: right;
}

Insert image and text inside a submit button

3 Answers3