How to use a custom image instead of submit button

This article was written by in June 28, 2014, & may not be posted on other sites!
Original source url for this article: How to use a custom image instead of submit button

How to use an image instead of submit button?
If you want to hide the default submit button and use an image instead, then this is how to use an image instead of submit button in HTML:

 

How to use an image instead of submit button method 1

It is easy to use an image instead of the submit button by changing the HTML code. A regular submit button in HTML code might look something like this:
<input type="submit" value="Search" name="search">
To use an image instead of submit button, just change the HTML code to something like this, type = “image”:
<input type="image" src="images/myImage.jpg" width="100px" height="40px" alt="submit">

 

How to use an image instead of submit button method 2

There is another way to use an image instead of a submit button or any button. Simply add an image insisde the button element, something like this:
<button type="submit"><img src="images/myImage.jpg"/></button>
To make the cursor show a hand when hovering, add this CSS:
button:hover{
cursor:pointer
}

 

How to use a regular submit button with an image background

To use a regular HTML submit button and add a background image, just add this CSS.
HTML
<input type="submit" value="Search" name="search">
CSS
input[type="submit"]{
background-color: transparent;
background-image: url(images/myImg.jpg);
display: inline-block;
cursor: pointer;
height: 100px; /*height of the background image*/
width: 40px; /*width of the background image*/
}

If you need to hide the value=”search” text, just add this CSS to your button:
font-size: 0;
line-height: 0;

 

Spread the word

Facebooktwittergoogle_pluslinkedinmail

Leave a Reply

Your email address will not be published. Required fields are marked *