Стиль кнопки Windows OS CSS

Question

Может кто-нибудь угадать, какой стиль CSS я должен применить к кнопке, чтобы угадать этот точный вид.

Примечание: я понимаю, что это стиль по умолчанию для кнопок без стилей в Windows , и мне не нужно применять какой-либо CSS для получения этого стиля, но в Mac и Linux это не одно и то же поэтому я не могу зависеть от стиля ОС по умолчанию для этого. Я должен был бы заставить этот стиль сам в css. Кто-нибудь знает, что стилизация CSS может последовательно производить этот эффект?

Answer 1

Примеры

Firefox 3.6.12

Safari 5.0.3

Chrome 8

Internet Explorer 8

По какой-то причине свойство filter, принадлежащее IE8, не работает (оно должно работать).

HTML

<button>
    <span>
       <span>
          Submit
       </span>   
    </span>
</button>

Похоже, что оно лучше работает в браузере2 дочерних элемента.Использование самого button в качестве внешнего элемента вызвало несколько проблем.

CSS

button {
    background: none;
    border: none;
    padding: 0;   
}

button span {
    display: block;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #999;
    padding: 0;
    background: #F0F0F0;
    background: -moz-linear-gradient(top,  #F0F0F0 50%, #D4D4D4 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#F0F0F0), color-stop(50%,#D4D4D4));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0F0F0', endColorstr='#D4D4D4',GradientType=0 );
}

button span span {
    border: 1px solid #fff;
    padding: 10px;
}

Смотрите его на jsFiddle .

Answer 2

ОК, так как я не вижу ваше изображение, я просто посмотрел на кнопку по умолчанию в моей ОС (Windows 7). Стиль был бы примерно таким (только Firefox, потому что мне лень делать кросс-браузерную версию):

a.button {
    height: 18px;
    padding: 2px 8px;
    border: 1px solid #F3F3F3;
    -moz-box-shadow: 0 0 0 1px #707070;
    -moz-border-radius: 3px;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    font: normal 12px sans-serif;
    color: black;
    text-decoration: none;
}
a.button:hover {
    border: 1px solid #ECF7FD;
    -moz-box-shadow: 0 0 0 1px #3C7FB1;
    background: -moz-linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
}
a.button:active {
    padding: 2px 7px 3px 9px;
    border: 1px solid #73A7C4;
    border-bottom: 0;
    -moz-box-shadow: 0 0 0 1px #2C628B;
    background: -moz-linear-gradient(top, #E5F4FC 0%, #C4E5F6 50%, #98D1EF 51%, #68B3DB 100%);
}

Это версия только для CSS с использованием CSS3. Он не будет работать в Internet Explorer, и Opera не будет отображать фоновые градиенты. Так что лучше использовать изображения вместо чистого CSS.

[EDIT]

Более полная реализация: jsfiddle (не стесняйтесь добавлять IE-фильтры и какой-то запасной вариант для Opera и редактируйте мой ответ, чтобы публиковать его - БЫТЬ БОЛЬШИМ:))

a.button {
    height: 18px;
    padding: 2px 8px;
    border: 1px solid #F3F3F3;
    -moz-box-shadow: 0 0 0 1px #707070;
    -webkit-box-shadow: 0 0 0 1px #707070;
    box-shadow: 0 0 0 1px #707070;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: -moz-linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#F2F2F2), color-stop(0.5,#EBEBEB),color-stop(0.51,#DDDDDD),color-stop(1,#CFCFCF));
    background: linear-gradient(top, #F2F2F2 0%, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF 100%);
    font: normal 12px sans-serif;
    color: black;
    text-decoration: none;
}
a.button:hover {
    border: 1px solid #ECF7FD;
    -moz-box-shadow: 0 0 0 1px #3C7FB1;
    -webkit-box-shadow: 0 0 0 1px #3C7FB1;
    box-shadow: 0 0 0 1px #3C7FB1;
    background: -moz-linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#EAF6FD), color-stop(0.5,#D9F0FC),color-stop(0.51,#BEE6FD),color-stop(1,#A7D9F5));
    background: linear-gradient(top, #EAF6FD 0%, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5 100%);
}
a.button:active {
    padding: 2px 7px 3px 9px;
    border: 1px solid #73A7C4;
    border-bottom: 0;
    -moz-box-shadow: 0 0 0 1px #2C628B;
    -webkit-box-shadow: 0 0 0 1px #2C628B;
    box-shadow: 0 0 0 1px #2C628B;
    background: -moz-linear-gradient(top, #E5F4FC 0%, #C4E5F6 50%, #98D1EF 51%, #68B3DB 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#E5F4FC), color-stop(0.5,#C4E5F6),color-stop(0.51,#98D1EF),color-stop(1,#68B3DB));
}

<a class="button" href="#">Click me</a>

[Редактировать 2]

Отредактировано для включения фильтра IE. http://jsfiddle.net/Kyle_/aUsxy/3/

Answer 3

Вот хороший урок по получению эффекта, который вам нужен:

http://www.monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors

Довольно сложно стилизовать кнопку точно таким же образом и в пригодном для использования масштабируемом формате.

Альтернативой является симуляция кнопки HTML, создание ее в виде элемента div с фоновым изображением и написание некоторого Javascript для имитации функциональности.

Answer 4

Создайте необходимые градиенты с помощью http://www.colorzilla.com/gradient-editor для .button и .button:hover. Таким образом, вы получите именно то, что вы хотите.

Answer 5

Возможный вариант - изображение с 9-фрагментным масштабированием , например:

$('.example').scale9Grid({top:10,bottom:10,left:10,right:10});

Answer 6

Используйте набор изображений в качестве фона кнопок.Набор, а не одно изображение, поэтому на вашем сайте могут быть кнопки различной ширины.