How to style the form buttons

Buttons, like any form element can have a CSS style applied. In the code below, we've applied various styles to our form button:

#Button1 {

Height: 30px;
Width: 180px;
background-color: #820404;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFFF;

}

#Button1:hover {

background-color: #CCCCCC;

}

Add an ID attribute to your button:

<INPUT TYPE="Submit" Value="Submit" ID="Button1">

Then try some CSS styles in your own code to see how they work. Try the padding and border properties to see what happens. The border-color property is also worth trying out.

Before implementing any button styles, though, it's worth checking out the results in more than one browser, especially when it comes to borders.

You can actually use images as buttons, if you like. But they need Javascript switched on in the browser to make them work. The TYPE to use is IMAGE:

<INPUT TYPE="image" SRC="image_name.gif" ALT="alt text" onClick="submit_function()">

If you're selling things on your site then image buttons may not be a good idea as some of your users won't see them.