CODEWITHSUNDEEP
cssbrowserinputcolorsbackground-color
Alex
Alex

Reputation: 68406

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

Upvotes: 7

Views: 12929

Answers (2)

Sotiris
Sotiris

Reputation: 40036

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.

Upvotes: 10

Soatl
Soatl

Reputation: 10592

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

Upvotes: 3

Related Questions