Цвет фона кнопки браузера по умолчанию

Question

Итак, проверьте эти кнопки:

они не имеют стиля и выглядят довольно хорошо (2-й - при наведении мыши).

Можно ли как-то сохранить их внешний вид, но изменить цвет фона?

Если я сделаю это через свойство background-color CSS, я получу это:

Который на самом деле не похож на другие (он не округлый, цвет простой, не имеет внутреннего свечения) ...

Answer 1

Каждый браузер имеет свой собственный стиль. Но с помощью CSS вы можете достичь этого. Проверьте следующее:

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

Обновленная версия кнопки css с :hover и градиентом от замечательного сайта, который @xec разместил в комментарии.

Демо: http://jsfiddle.net/Ekf5b/1

Полезный генератор градиента: http://gradients.glrzad.com/

Некоторая дополнительная информация: Первый шаг - добавить закругленные углы. Для установки закругленных углов в ie вы можете использовать css3pie . Затем добавьте градиент, используя любой инструмент, который ссылался. Наконец, я добавил padding по понятной причине и border, чтобы переопределить настройки браузера по умолчанию.

Answer 2

Для кнопок по умолчанию применяются некоторые настройки padding и border. Вам также нужно будет отредактировать эти настройки, чтобы кнопка выглядела одинаково. Это может также отличаться от браузера к браузеру.

Посмотрите в веб-отладчике в Firefox (получив Firebug) или Google Chrome, щелкните правой кнопкой мыши и осмотрите элемент. Это покажет вам CSS по умолчанию, который добавляется к кнопкам, чтобы вы могли видеть, как их редактировать