Alex Alex - 25 days ago 15
CSS Question

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

Answer

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.

Comments