How to Use an Image as a Submit Button

How do I use an image as a submit button?

Use an image type input:

<input type="image" src="/Button1.jpg" border="0" alt="Submit" />

The full HTML:

<form id='formName' name='formName' onsubmit='redirect();return false;'>  <div class="style7">    <input type='text' id='userInput' name='userInput' value=''>    <input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />  </div></form>

button image as form input submit button?

You could use an image submit button:

<input type="image" src="images/login.jpg" alt="Submit Form" />

set image as submit button

Change type from input to image and add value as submit:


<input type="image" value="submit" src="submit1.jpg" alt="submit Button" onMouseOver="this.src='submit1.jpg'">

Image for a submit button - which way is best?

Personally I would set it as a background rather than an image inside the button. So you would get the following.

<button type="submit" class="styledButton></button>

<style>
       .styledButton {
           background: url('mybutton.jpg') no-repeat;

       }
</style>

Submit Button Image

Edited:

I think you are trying to do as done in this DEMO

There are three states of a button: normal, hover and active

You need to use CSS Image Sprites for the button states.

See The Mystery of CSS Sprites

/*CSS*/
.imgClass { background-image: url(http://inspectelement.com/wp-content/themes/inspectelementv2/style/images/button.png);background-position:  0px 0px;background-repeat: no-repeat;width: 186px;height: 53px;border: 0px;background-color: none;cursor: pointer;outline: 0;}.imgClass:hover{   background-position:  0px -52px;}
.imgClass:active{  background-position:  0px -104px;}

<!-- HTML --><input type="submit" value="" class="imgClass" />

Adding an image to submit button using CSS

The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.

HTML:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS:

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

Using an image as a submit button

You can use appropriate CSS properties such as

border: none;
background: transparent;
cursor: pointer;

to remove the default styles from your input type="submit" button.

Image as a submit button

You can replace the anchor element with a button element but you will have to change the code a little:

<button type="submit"><img src="..."></button>

Then change the selectors in the code:

$(window).load(function() {
    $('button img').each(function() {
        ...
});

$(document).ready(function() {
    $("button").hover(
        ...
    );
});

If you want to get rid of the button styles, just use css:

button {
    padding: 0;
    border: none;
}

Insert image and text inside a submit button

Just add this atribute:

text-align:right;