Как реализовать эту кнопку в HTML / CSS?

Question

Это кнопка, которая была изначально реализована и стилизована в Silverlight.

Как реализовать эту кнопку в HTML / CSS? Обратите внимание на различные градиенты на границе и фоне кнопки , а также на более круглые углы на границе.Ширина границы должна быть настраиваемой, но равномерного размера вокруг кнопки.

Красный цвет в примере изображения - это фон страницы, а не часть кнопки.

Скриншот кнопки http://i52.tinypic.com/2vsetlw.png

ОБНОВЛЕНИЕ : Забыл упомянуть, я бы предпочел решение без изображений, т.е.чисто CSS.Css3 в порядке, мне не нужно, например, поддерживать IE6-8.

Answer 1

Я знаю, что порой кормить с ложечки не самая полезная вещь, но мне нужен был перерыв в работе.

Демо: http://jsfiddle.net/wesley_murch/SzHQZ/

Хорошо выглядит в FF4 и Chrome, IE возвращается к приличному виду (хотя это можно исправить с помощью PIE ).

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

<button>
    <span>
        Sign in
    </span>
</button>

button {
    border:0;
    padding:3px;
    background:#735544;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.18, #271D1B),
        color-stop(0.59, #735544)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #271D1B 18%,
        #735544 59%
        );
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;   
}

--- Требовался этот перерыв, чтобы заставить уценку вести себя ...

button span {
    display:block;
    color:#fff;
    font:900 18px arial;
    text-transform:uppercase;
    padding:.35em 1.3em;
    background:#382B25;
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.18, #382B25),
        color-stop(0.59, #C2A489)
        );
    background-image: -moz-linear-gradient(
        center bottom,
        #382B25 18%,
        #C2A489 59%
        );   
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;   
}

Answer 2

Просто сохраните изображение в качестве фона

<input type="submit"  class="btnSqueareInput" name="commit" value="SIGN IN"/>

btnSqueareInput {
background:transparent url(../images/sqaure.png) no-repeat;
border:medium none;
color:#FFFFFF;
cursor:pointer;
display:block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
height:32px;
margin:0;
padding:0;
text-align:center;
text-decoration:none;
vertical-align:top;
width:79px;
}

, где square.png - изображение кнопки без 'SIGN IN'

Answer 3

Похоже на скучную версию http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba:)

Вы можете взять пример оттуда и просто изменить цвета, вероятно, хотите заменить

border-bottom: 1px solid #222;

с чем-то вроде

border: 3px solid brown;

Приведенный выше пример использует альфа-смешанный png для градиента, но вы также можете перейти к градиентам css3, см. http://css -tricks.com / examples / CSS3Gradient / для хорошего кросс-браузера пример.