Alex Alex - 1 year ago 101
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

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 Source

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(
    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%
border:1px solid #000;}


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


Helpful gradient generator:

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download