Объёмные 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;
}

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

СКАЧАТЬСкачек: 460
1,13 Kb
Кто скачал?

ДЕМОПосмотреть
пример