Reply To: Help with two styles to a contact form, please.

[paulob]

Hi,

The depressed affect is the focus state of the button which a browser handles in its own way until you take charge of styling and then you lose many of the default actions of the button (this is similar to many other form controls)/

In your first example you had focus rules applied for the button to re-instate this effect but did not have them in the page where you say it is not working.

To style the button you would need to do something like this:

.cform input[type="submit"] {
    background: linear-gradient(#e7dec6, #dfd0b1) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-top:2px solid #d8d5d2;
    border-left:2px solid #d8d5d2;
    border-bottom:2px solid #7d766c;
    border-right:2px solid #7d766c;
    border-radius: 5px;
    font-weight: bold;
    height: auto;
    padding: 3px 20px;
    width: auto;
}

.cform input[type="submit"]:focus {
    position:relative;
    top:1px;
    left:1px;
    border-top:2px solid #7d766c;
    border-left:2px solid #7d766c;
    border-bottom:2px solid #d8d5d2;
    border-right:2px solid #d8d5d2;
    outline:0;
}