Объёмные CSS3 кнопки

В этом уроке сделаем объёмную CSS3 кнопочку с визуальным эффектом нажатия на неё.

HTML

Создадим кнопку:

<a href="#" class="button">Нажать</a>

Применим классу .button следующий стиль:

.button { 
         color: #fff; 
         padding: 8px 14px 10px; 
         background-color: #bc1815; 
         border: none; 
         margin-right: 25px; 
         position: relative;
         
        -webkit-user-select: none;
        -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
        box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
        -moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
        text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
             }

В нажатом состоянии:

    .button:active { 
        position: relative; 
        top: 3px;
        -webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
        -moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
        box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
    }

И чтобы скрыть нежелательные пиксели, по краям в нажатом состоянии под кнопкой, сделаем так:

.button:active:after { 
content: ""; 
width: 100%; 
height: 3px; 
background: #fff; 
position: absolute; 
bottom: -1px; 
left: 0; 
}

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