Adding a Style to the Submit Button

Submit buttons are gray, right? Well not necessarily. Of course you can just replace the standard form button with an image, but using CSS will give you a nice effect without the need to create and load an image, however small.

The HTML for a form button looks like this:

<input type="submit" value="Submit">

The part of that to which we will add the style is the 'input', this is called the selector for our style. Since we are going to make the button red we will call the style class we add 'red', it could be called anything but for clarity it is a good idea to call classes names that will mean something to you.

So, the style is added by creating a class of 'input' and adding some style properties to it. Specifically we will add a red background color to the button:

input.red {background-color: #cc0000;}

To make this readable as a style sheet it needs to have style tags surrounding it:

<style type=text/css>
input.red {background-color: #cc0000;}
</style>

Copy this style sheet and paste it before the </head> tag of your page.

Then find the HTML that makes the button:

<input type="submit" value="Submit">

 and alter it to read:

<input class="red" type="submit" value="Submit">

and you should have a nice red button for your form. 

Note: You will need to preview the page to see the effects of the styles in FrontPage, they will not appear in normal view.

However the black text is not too clear on that button, so let's add a little more to the style definition to make it look crisper:

<style type=text/css>
input.red {background-color: #cc0000; font-weight: bold; font-size: 12px; color: white;}
</style>

This will give you a red button with bold white text on it. Of course you can alter the colors to suit your site.

Browser Note: This does not work in Netscape, but Netscape users will be able to use your form, just with the standard ol' gray button.

>>Part III: Adding interest to text boxes

<<Part I: Introduction