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?

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.

Answer 2

Your (modern) browser (or css framework like bootstrap) contains default styling for submit buttons (so it will look "pretty good (corners slightly rounded, some gradient from top to bottom, etc.)" and not like the 1990's buttons).

When you override those gradients in your css (by changing background-color), you are overriding those programmed defaults your browser was using. Instead of only changing the background color, you can make your own nice gradient. And, as @ŠimeVidas pointed out in the comments, changing background color will also remove the default border-style too.

I'd recommend using a gradient generator instead of simply changing background-color.

Answer 3

The "problem" is that the default background is a quite complex gradient.

I advise you to take a framework like jQuery UI or Bootstrap to design your buttons. This is much easier and you will achieve probabily better results than searching your own background-gradient for your buttons.

Answer 4

You can make beautiful buttons with just a little CSS. Check out these references:

http://webdesignerwall.com/tutorials/css3-gradient-buttons

http://css3button.net/