Styling Submit

There are three different ways you can create a submit button so the first step in styling your submit button is to select which of the three will allow you to do what you want.

The simplest way to get full control of the appearance of your submit button is to use <input type="image" src="myimage.gif" alt="Submit"> which displays the specified image as the submit button. This means that you can specify exactly what you want the button to look like because the image is the button. With this type of submit button the X and Y coordinates of where in your image was clicked to trigger the submit is also passed (if you give the button a name). What you don't get with this sort of submit button is the effect of a button being depressed when the image is clicked on so we need to add that using CSS. You also don't get the opportunity to pass a value but then you wouldn't use this type of submit button if you have multiple submit buttons on your form and that's the only time you need to pass a value.

The most commonly used submit button is <input type="submit" value="Submit"> which allows the button text to be specified in the value attribute where it can't be styled. Styling the text and background colours and the border are as easily done as with the other form fields we have already looked at. The main difference here is that in order for the button to change appearance when depressed we also need to provide a different border for when the field is active.

The third option is to use a <button> tag which defaults to being a submit button when included inside a form. This tag works like the textarea tag in that the value for the button is not contained in a value attribute but is instead wrapped between the open and close button tags. This allows you to use HTML and CSS to style the button text exactly the same way as you would with ordinary text on the page. You can also wrap an image inside of the button tag in order to use an image as the submit button. The difference between this and and the other way already mentioned for using an image is that this variant allows you to put padding around the image if you want and does not pass the position within the image that was clicked.

input[type=submit] {border:2px outset #cc9;background-color:#fcc;border-radius: 1em;}
input[type=submit]:active {border:2px inset #cc9;}
input[type=image] {border:2px outset #cc9;background-color:#fcc;border-radius: 1em;}
input[type=image]:active {border:2px inset #cc9;}
button {border:2px outset #cc9;background-color:#fcc;border-radius: 1em;}
button.img {padding:0;}
button:active {border:2px inset #cc9;}

Here is how the various submit buttons look:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow