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

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

Посмотрите пример, чтобы увидеть готовую кнопку.

Демонстрация работы

Создаем кнопку 

Код HTML для этой кнопки очень простой, так как весь эффект создается с помощью кода CSS, нужно только создать ссылку класса .push_button:

<a href="#" class="push_button">
	Push Me
</a>

Код CSS 

В коде CSS сначала зададим стили ссылке, чтобы она выглядела, как кнопка, после этого создадим активное событие для кнопки.

Скопируйте следующий код, чтобы создать внешний вид кнопки:

/**************************************************** * Push Button *****************************************************/
.push_button{
	position:relative;
	width:200px;
	color:#FFF;
	display:block;
	text-decoration:none;
	margin:0 auto;
	border-radius:5px;
	border:solid 1px #D94E3B;
	background:#cb3b27;
	text-align:center;
	padding:20px 30px;

	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	-webkit-box-shadow: 0px 9px 0px #84261a;
        -moz-box-shadow: 0px 9px 0px #84261a;
        box-shadow: 0px 9px 0px #84261a;
} 

После этого кнопка выглядит так:

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

Скопируйте следующий код, чтобы создать эффект при нажатии кнопки:

.push_button:active{
    -webkit-box-shadow: 0px 2px 0px #84261a;
    -moz-box-shadow: 0px 2px 0px #84261a;
    box-shadow: 0px 2px 0px #84261a;
    position:relative;
    top:7px;
} 

Нажатая кнопка выглядит так:

Обратите внимание, что в представленном коде CSS и у кнопки, и у селектора активного элемента CSS относительное позиционирование, и для нажатого состояния мы сдвигаем кнопку вверх на 7 пикселей.

Сдвиг кнопки вверх на 7 пикселей создает видимость нажатия в дополнение к уменьшению размера тени блока.

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

Демонстрация работы

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:

• Создание кнопки в виде заплатки с использованием CSS
• Создание нескольких рамок с использованием CSS3
• Создание выдвигающейся формы поиска