How to make a submit button with text + image in it?
Solution 1
input type="submit"
is the best way to have a submit button in a form. The downside of this is that you cannot put anything other than text as its value. The button element can contain other HTML elements and content.
Try putting type="submit"
instead of type="button"
in your button
element (source).
Pay particular attention however to the following from that page:
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the
<button>
and</button>
tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Solution 2
Let's say your image is a 16x16 .png icon called icon.png Use the power of CSS!
CSS:
input#image-button{
background: #ccc url('icon.png') no-repeat top left;
padding-left: 16px;
height: 16px;
}
HTML:
<input type="submit" id="image-button" value="Text"></input>
This will put the image to the left of the text.
Solution 3
In case dingbats/icon fonts are an option, you can use them instead of images.
The following uses a combination of
- an icon font (e.g. Font Awesome),
- character encodings in HTML (e.g.

) -
the Unicode code point of the icon you want to use (e.g.

for the sign in logo), - CSS:
In HTML:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<form name="signin" action="#" method="POST">
<input type="text" name="text-input" placeholder=" your username" class="stylish"/><br/>
<input type="submit" value=" sign in" class="stylish"/>
</form>
In CSS:
.stylish {
font-family: georgia, FontAwesome;
}
Notice the font-family
specification: all characters/code points will use georgia
, falling back to FontAwesome
for any code points georgia
doesn't provide characters for. georgia
doesn't provide any characters in the private use range, exactly where FontAwesome
has placed its icons.
Solution 4
You're really close to the answer yourself
<button type="submit">
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
Or, you can just remove the type-attribute
<button>
<img src="save.gif" alt="Save icon"/>
<br/>
Save
</button>
Solution 5
I have found a very easy solution! If you have a form and you want to have a custom submit button you can use some code like this:
<button type="submit">
<img src="login.png" onmouseover="this.src='login2.png';" onmouseout="this.src='login.png';" />
</button>
Or just direct it to a link of a page.
David
Updated on September 25, 2021Comments
-
David over 2 years
I would like to have a submit button that contains text and an image. Is this possible?
I can get the exact look I want with code that looks like:
<button type="button"> <img src="save.gif" alt="Save icon"/> <br/> Save </button>
... but I haven't found a way to have one of those for my forms. Is there a way to do that with an
<input type="submit" ...>
element? Or am I forced to go the image or text way?
-
Lei Yang over 4 yearswhat does
#ccc url('icon.png')
mean? -
Lei Yang over 4 yearswhat does
#ccc url('icon.png')
mean? -
salah tabet about 4 yearsThat is just a hex color close to light gray