Creating a custom html button with background Image and Text

Question

I would like to know how I can create a custom HTML button which has a background Image and I can show a custom text over that image.

For example, I would like to show a submit button for which I have a background image for that button and the text "Submit" comes on top of that Image.

I tried this -

<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">

However, it does not work properly. I just see the test submit and the button but the image does not show up.

It would be great if someone could help me out with this.

Solution 1

The simplest way is probably to use a button element with a background. Use e.g. padding properties to make the button suitably large. It is a useful precaution to set a background color for the button, for use when the background image is not shown for some reason, using a color that has sufficient contrast with the text (so it should be similar in color usage to the background image). Example:

<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>

Caveat: In old versions of IE, there are several bugs in the implementation of button elements. The bugs bite most seriously if a form has several submit buttons.

The reason for the failure when using an input type=submit element is that they are commonly implemented by browsers using built-in routines that are rather immune to CSS.

Solution 2

I recommend that you use <button> instead of <input type='submit' /> or <input type='button' />. The reason is that you can embed HTML elements (nest elements) into the <button> element. This way, you can make a much more flexible button, which can be customized even more.

<button>
    <span class='image'></span>
    <span class='text'>Click Me!</span>
</button>

Solution 3

<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">

you have to specify the width and height of the image so it covers your button and yes check the path of the image

this is exactly what I have in one of my css and usually what I do in this situation:

html

<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>

css

.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}