Search code examples
cssbrowserinputcolorsbackground-color

Default browser button background color

So check out these buttons:

enter image description here

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:

enter image description here

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

Solution

  • 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.