Default browser button background color

Question

So check out these buttons:

they are unstyled, and look pretty good (the 2nd one is mouse over).

Can I somehow maintain their looks, but change the background color?

If I do it trough CSS's background-color property I get this:

Which doesn't really look like the others (it's not rounded, color is plain, doesn't have inner glow)...

Answer 1

Each browser has it's own styling. But using css you can achieve it. Check the following:

input {-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.16, rgb(207,207,207)),
    color-stop(0.79, rgb(252,252,252))
);
background-image: -moz-linear-gradient(
    center bottom,
    rgb(207,207,207) 16%,
    rgb(252,252,252) 79%
);
padding:3px;
border:1px solid #000;}

UPDATE

An updated version of the css button with :hover and gradient from the great site that @xec posted in the comment.

Demo: http://jsfiddle.net/Ekf5b/1

Helpful gradient generator: http://gradients.glrzad.com/

Some additional information: The first step is to add rounded corners. To set rounded corners in ie you can use css3pie. Then add gradient using any tool that referred. Lastly I added padding for obvious reason, and border to override browser's default.

Answer 2

Buttons by default have some padding, and border settings applied to them. You will need to edit these settings as well to keep the button looking the same. It may also look different from browser to browser.

Look in the web debugger in Firefox (by getting firebug) or Google Chrome, right click and inspect element. This will show you the default css that is added to the buttons so that you can see how to edit them