3D кнопки с помощью CSS3

[Maxee]

Кто поможет правильно, без лишнего кода изменить стандартную кнопку " Купить " на CSS3 ?!

ПОСМОТРЕТЬ ДЕМО: http://shimansky.ru/...ttons/demo.html

САМ ИСХОДНИК: http://habrahabr.ru/post/137005/

Заранее спасибо :-)

[pashast]

a.button {
    display: block;
    float: left;
    position: relative;
    height: 25px;
    width: 80px;
    margin: 2px 10px 5px 2px;
    text-decoration: none;
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

a.button:before,
a.button:after {
    content: '';
    position: absolute;
    left: -1px;
    height: 25px;
    width: 80px;
    bottom: -1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
a.button:before {
    height: 23px;
    bottom: -4px;
    border-top: 0;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -webkit-box-shadow: 0 1px 1px 0px #bfbfbf;
    -moz-box-shadow: 0 1px 1px 0px #bfbfbf;
    box-shadow: 0 1px 1px 0px #bfbfbf;
}

a.button,
a.button:hover,
a.button:visited {
    color: #555;
    border-bottom: 4px solid #b2b1b1;
    text-shadow: 0px 1px 0px #fafafa;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#e2e2e2));
    background: -moz-linear-gradient(top,  #eee,  #e2e2e2);
    box-shadow: inset 1px 1px 0 #f5f5f5;
}
.button:before,
.button:after {
    border: 1px solid #cbcbcb;
    border-bottom: 1px solid #a5a5a5;
}
.button:hover {
    background: #e2e2e2;
    background: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#eee));
    background: -moz-linear-gradient(top,  #e2e2e2,  #eee);
}

a.button:active {
    border: none;
    bottom: -4px;
    margin-bottom: 5px;
    -webkit-box-shadow: 0 1px 1px #fff;
    -moz-box-shadow:  0 1px 1px #fff;
    box-shadow:  1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, 0.3);
}
a.button:active:before,
a.button:active:after {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

Жаль что только фиксированая ширина.

Допилить до норм состояния нет времени.

[Maxee]

Отлично, хорошо работает !! И в правду жаль что только фикс. ширина.

Огромное Спасибо :lol: +++++++

[Benjamin]

Спасибо! Установил данный стиль. Но как теперь кнопки привести в порядок?