CODEWITHSUNDEEP
htmlcssbutton
user1149499
user1149499

Reputation: 583

Styling of "submit" buttons

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?

Upvotes: 10

Views: 13611

Answers (4)

d-_-b
d-_-b

Reputation: 23161

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.

Upvotes: 2

Kyle Weller
Kyle Weller

Reputation: 2623

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

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

http://css3button.net/

Upvotes: 2

poke
poke

Reputation: 387577

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.

Upvotes: 4

atreju
atreju

Reputation: 477

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.

Upvotes: 2

Related Questions