About the Submit button

The HTML code below defines the Submit button:

<input type="Submit" value="Submit" class="controls">

The 'value' refers to the actual string displayed to the user; this can be anything.

The look of the Submit button is defined by the following lines in the CSS file:

input[type=submit] {
    cursor: pointer;
    float: right;
    background: url(images/Submit.png) no-repeat 0 0;
    width: 115px;
    height: 45px;
    margin: 0;
    overflow: hidden;
    padding: 32px 0 0 116px;
    border: none;
}

input[type=submit]:active {
    background: url(images/Submit_down.png) no-repeat 0 0;
}

Note: The CSS selector is written in a slightly different way, i.e. through an attributes type (input[type=submit]); this notation says that the style should be applied to <input> of the type Submit.

If you have a look at the code, you can see that there are two different styles defined for the button. The first one is the style for the normal state of the button, the second one is how the button will look when it is clicked upon. To define this last state, the pseudo class :active is used.

In this part of the CSS, two background images are specified. They are assumed to be placed in a directory that is defined relative to the CSS file.