This is a simple tutorial you can use if you would like your submit form to have a submit button other than one you can customize with regular css.
I will be using the following image, but you can made your own and adjust the tutorial to what you need it to be to fit your image. You are welcome to save the image below and try out the tutorial using this image.
1. HTML
In your form, you need to name a class for your submit button. In this case, I have put “submit”.
<input type="submit" name="send" value="Submit" class="submit" />
2. CSS
In your css you need to put the following code. You will want to make sure your border is at 0px, specify the height and width, and then insert the background image file name.
.submit {
background-image: url('submitbutton-example.png');
background-repeat: no-repeat;
height: 64px;
width: 171px;
padding-top: 2px;
padding-bottom: 2px;
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
display: block;
border: 0;
text-align: center;
color: #000;
font-family: Arial;
}
Replace submitbutton-example.png with your image and your height and width with the size of your submit button. You can also replace submit with other words or change the text within the button to any size you desire.
Great tip,I would love to make one and put it as my submit button,but the saddest thing is that i am not so good at Photoshop.I want to contact somebody for helping me in Photoshop. Thanks again 😀 for sharing your idea!
The cool thing is there are a lot of websites that offer free graphic buttons. I will be updating and re-introducing my freebie page for buttons soon for people to be able to save and use.
I would rather add borders and shadows to a simple Div class and call an event handler on mouse click (on the div) instead of placing image in the submit button . Anyways , its a nice tutorial for newbies .
Regards ,
Pramod
Not everyone uses the CSS… I prefer it as well for my own site. Some people use it as a part of this design… one that I see it a lot it for subscription sign up boxes. Another, I see one some elegantly designed online stores.
If you re someone that uses a textured backgroud for the image, and still dress it up with CSS for a border or the font, the size of the button, and its positioning, this tutorial is a good basic foundation towards that.
By the way… the submit button needs no division layer (div)… it is an input type that you can give a CSS element class to.
Thank you for showing how to create this feature. I think an image is much easier and better to use for a submit button.
cool this is a nice trick,
but how would you do it if you also want to add three states for the button – normal, hover, onclick ?
I mostly use background color for the submit button.I will try from now onwards images also in my submit button. Thanks for the post
its a great and something different look to your submit button..
every people use general and local button but this one gives some extra look and also batter than regular..
so i like it and also wanna try it..
thanx for sharing..
I will try to follow the steps you indicate on a blog that I have for testing.
I’m no expert in css, but still going to try, I think good idea your tutorial.
Greetings.
Using image as submit button looks attractive. Thank you for sharing the post. I’m gonna try it on my blog soon.
Visual button is easily visualized by the visitors. It need to be offered a new challenges at this time. But at this way many new things and new up gradation that seem your website more updated and attractive for the visitors.
Thanks..
Using photo in place button look something good ,…. i going to try it . Thanks for sharing !!
Thanks for the very nice refresher course Nile!
But when it comes to adding any type of HTML code, with exception (maybe) of copy & pasting
my autoresponder code and adding it to a widget on my blog.
I’ll basically pass and leave it to the pros such as yourself!
That just seems to make life a little less hectic!LOL!