How To Make Your Own Custom Form Buttons

You don't have to settle for using the standard grey & boring form buttons... you can customize them to match the look and feel of your website quite easily.

Why Bother?
Which would look better on your web forms...
this -- or this -- ?

There are two easy ways I know of to make custom form buttons....

One method uses an image to replace the standard input buttons, the other uses CSS to change the font and color parameters to give buttons a more custom look.

To change the color & font with CSS:

First, create a style with the background color, borders and font that you want for the button. In the example below, all of the parameters are adjustable to fit your scheme.

<style>
.MYbutton {
background-color : #8080ff;
border-top : 2px outset #80ffff ;
border-right : 2px outset #0000ff ;
border-bottom : 2px outset #0000ff ;
border-left : 2px outset #80ffff ;
font-family : verdana, helvetica, sans-serif;
font-size : 9pt;
font-weight : bold;
font-variant : small-caps;
color : #ccffff;
padding-left : 1px;
padding-right : 1px;
}
</style>

The first line of the style above is the 'class'. Almost anything that you designate as class="MYbutton" will use the style above. If you wanted to limit the use of that style to buttons only, then the first line should read: input.MYbutton

The next step is assign the new class to each button:

<input type="button" class="MYbutton" value="Submit">
...which will give you this:

That's all there is to it. It's probably easier if you add the style for your buttons to your external style sheet, but you can place it in the page html too if you want.

Note: Don't get too creative with your fonts; if your visitor does not have your chosen font installed on their machine it will default to a font that is installed, and probably not anything like what you wanted.

To use your own image:

You can create your own custom image with just about any graphics program. Just like any other image, make it with as few colors and smallest file size possible.

for example --

Note: It's probably a good idea to make a button that looks like a button - with the 3D effect caused by a light/dark border - so that people don't become confused...

After you make your button, just edit the form input tag:

A standard form input tag looks something like this:
<input name="submit" type="submit" value="Submit">

You'll need to edit it like this:
<input name="submit" type="image" border="0" src="url/submitbutton.gif" width="79" height="13" alt="Subscribe Now!" align="middle">

Remove the value="Submit" from the tag... otherwise the browser may print Submit on top of your image.

Also - replace the "url/submitbutton.gif" with the URL & name of your image, and change the size properties to match your custom button. (Don't forget to upload the image to your server.)

You can use your image with a CSS command...

But in testing I noticed that different browsers didn't display it the same way, so it would probably be best to use one of the methods above.

You can also use this outside of forms.

These CSS style commands can be applied to many page elements and just about any event that can be triggered by clicking a link... "Email Me" links.... "Next Page" links, etc. All it really takes is adding your class to the tag.

For instance, you can change this:

To this:

...simply by replacing the "Click Here..." text with
<input type='button' class='MYbutton' value='Click Here To Send Me An Email'>

Here is a 'MailTo:' script you can play with:

You're not limited to buttons, either:

A style like this can be applied to any page element where you want to give a little extra 'punch'... like a limited-time offer or a place where you want to add a little more visual drama.

To get the effect above, simply add the class to your paragraph tag:
<p class="MYbutton">Some Text</p>

This works in table cells (or entire tables), you can put a cool border around an image, lots of things... the only limit is your imagination! (and browser capability)

Important Note about form scripts: Different programs will write form scripts with slight variations. The code snippets above are just examples of form elements, yours will be different in detail.

Some experimenting and careful testing will be required, but it's worth it if you want to give your webpages and forms a more custom look and feel.

As far as I have been able to test, these methods work in all major browsers, and degrade to standard grey or text in others... the only variations seem to be in the way they display the final size of a form button.

Test It Yourself Anyway! Just like any other change like this, you will need to test it in as many different ways as you can.

What impact all this would have on your website success is uncertain... but what is certain is that custom touches like this can help make a better overall impression, which can lead to a better conversion rate, so it's probably worth the effort.

Besides, it's fun to play with this kind of thing, to see what you can come up with.

To Your Success!
Tim

By Tim Brown © 2006. About the author: Tim is the webmaster at http://BLT-Web.com, where webmasters can find free tools, advice, tips and other useful resources designed to help them build a successful website.

Webmasters & Publishers:
You are welcome to publish this article free of charge on your website, newsletter, or e-zine, provided:
* You don't change the article in any way and all links remain intact.
* You include the entire article, including the "about the author" box.
* In doing so you agree to indemnify the author, blt-web.com and its directors, officers, employees and agents from and against all losses, claims, damages and liabilities which arise out of its use
* I would appreciate it if you send a courtesy copy of your publication to