How To Use Image As Submit Button

If you need to use a nifty image as the submit button for your site, here are two easy ways to accomplish the task.

Method 1: Input Image

Change your submit input code to this – be sure to replace the URL with your own image.

<input type="image" src="b2.png" value="Sign Up!">

Method 2: CSS Background

There are actually two ways to go about applying CSS

Method 2.1 For inline styling

<input type="submit" value="Sign Up!" style="background:url('b2.png') no-repeat; width: 188px; height: 60px; border: none; color: transparent; font-size: 0;">

Method 2.2 For external stylesheets, add this to your stylesheet

.submitimg {
background:url('b2.png') no-repeat;
width: 188px;
height: 60px;
border: none;
color: transparent;
font-size: 0;
}

Don’t forget to add the class to your form
<input type="image" value="Sign Up!">

Do You Want A Hands-Free Business?

Then get this guide to help you systemize your business so you'll have more time working on your business.

!
!

Hey! I want to make sure you know what you're getting here. In addition to the guide, you will also receive our memo that includes special offers, announcements and of course actionable information.

Terms and Conditions checkbox is required.
Something went wrong. Please check your entries and try again.
Facebook Comments