Add text to button with image HTML

Question

I have a button which is initially an image and performs an action when clicked. However I want to add the title Submit to the button.

How could I do this?

<form name="input" action="" method="post">
<input type="text" name="emailaddress" placeholder="email address" class=emailInput />
<button type="submit" style="border: 0; background: transparent">
    <img src="submit.png" width="50" height="31" class=submitButton alt="Submit" />
</button>
</form>

Answer 1

Best way is to do this with CSS since the image is actually a background for the text I suppose.

• remove the image from inside the button
• use css to decorate the button
• place the text in the button

css:

button {
    background:transparent url(submit.png) no-repeat left top;
    width:50px;
    height:31px;
}

more here.