Creating a custom html button with background Image and Text

html htmlbutton
learner2010 picture learner2010 · Dec 9, 2011 · Viewed 71k times · Source

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.

Answer

Saeed Neamati picture Saeed Neamati · Dec 9, 2011

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>

Related questions

How to call a PHP function on the click of a button

I have created a page called functioncalling.php that contains two buttons, Submit and Insert. I want to test which function is executed when a button gets clicked. I want the output to appear on the same page. So, I …

Read More
Can I make a <button> not submit a form?

I've got a form, with 2 buttons <a href="index.html"><button>Cancel changes</button></a> <button type="submit">Submit</button> I use jQuery UI's button on them too, …

Read More
How to create a HTML Cancel button that redirects to a URL

I am playing with the Buttons in the w3schools Tryit editor, and I am trying to figure out how to make my browser redirect to an URL when I click on the "Cancel" button. Here's what I have tried: …

Read More