Creating Styled Submit Buttons

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:

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:

 and alter it to read:

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: