Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание трехмерной нажимаемой кнопки с использованием CSS3

18 июня 2015 | Опубликовано в css | 2 Комментариев »

В этом уроке мы рассмотрим, как можно использовать переходы 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

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

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




Комментарии

  1. Сергей
    Thumb up Thumb down +3

    Какая-то откровенно кривая у вас кнопка по анимации получилась. Такой вариант работает гораздо приятней jsfiddle.net/4y3ytuk0/

    Ответить

Оставить ответ


7 + три =

Вставить изображение