CSS Form Buttons - Submit and Reset

The final part of styling our HTML forms is changing the appearance of the submit and reset buttons. This can make a huge difference to the visual impact of your forms, giving them a more coherent, professional feel than they would have if you stuck to the standard browser-generated buttons.

Here's a typical submit and reset button combination:

<input type="submit" value="Submit" />
<input type="reset" value="Reset" />

In order to apply CSS to these two buttons we first need to assign them classes, to separate them from the rest of our input types. If we want we can give them different class names, but it is common to want them to be styled the same, and in this case we can give them both the same class:

<input type="submit" value="Submit" class="button" />
<input type="reset" value="Reset" class="button" />

Next we can write our CSS to add styling effects to the buttons:

input.button {
	background-color: #660099;
	color: white;
	font-family: "trebuchet ms", arial, sans-serif;
	border: 1px solid black;
	font-style: italic;
}

And there we have it!

Using these CSS form styling techniques we can quickly and easily make significant design changes to our forms, making them fit in with the style of our website in a much more natural way.