Styling of “submit” buttons

Question

I am wondering if anyone knows why the \"default\" style of a \"submit\" button looks pretty good (corners slightly rounded, some gradient from top to bottom, etc.) but the

Answer 1

Browsers come with a big set of default styles to make things look pretty if the styles are not set by the website. For example Firefox has the following styles defined for the default submit button:

input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
    cursor: default;
    font: -moz-button;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}

-moz-appearance is a non-standard property, that defines the style to be consistent with the operating system’s default button style. That’s why it will look different on different operating systems too.