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 moment I add a background color it changes to a 1990's era square button with 2px border...just looks awful.

Can I somehow keep most of the default styling but change the background color? Thank you!

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.