Как через CSS заставить кнопку реагировать на нажатие

В CSS есть определенное состояние ссылки, которое я не использую очень часто. По крайней мере, я не использовал его часто до этого, но сейчас я понимаю, что оно может пригодиться. Я говорю о состоянии ссылки "active".

Это состояние начинает работать, когда Вы нажимаете на ссылку. То есть, после нажатия оно активируется. Мы все пользуемся состояниями "hover" или "visited", а состояние "active" может быть полезным, когда мы имеем дело со стилизоваными кнопками.

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

В Интернете такое встречается очень редко. Вы просто нажимаете на кнопку, и ничего не происходит. Конечно в некотрых браузерах есть некоторые подобные свойства при отображении страниц, но это все равно не то. Даже кнопки, которые благодаря фоновому рисунку выглядят выпуклыми, при нажатии на них никак не реагируют. Они остаются статическими и неотзывчивыми.

Так быть не должно. Просто используйте состоянием "active" для придания Вашим кнопкам "нажатого" или любого другого вида. Это выделит Ваш сайт или скрипт из общей массы, так как пользователям это будет напоминать их операционную систему.

Хватит болтать, давайте приступим к делу.

Допустим у нас есть кнопка, которая использует рисунок. Разметка будет выглядить так:

<a id="button"></a>

Добавим стилей. Наш CSS будет выглядеть так:

#button {
display: block;
width: 135px;
height: 43px;
background: url(button.png) no-repeat top;
}

Мы превращаем ссылку в блок, придавая ему высоту и ширину и задавая фоновое изображение. Кнопка будет выглядеть так:

Теперь нам необходимо прописать состояние "active":

#button:active {
background: url(button.png) no-repeat bottom;
}

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

Здесь находится картинка, о которой я говорю. А вот здесь демо (в Internet Explorer работать не будет - тут находится возможное решение проблемы).

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.usabilitypost.com
Перевел: Максим Шкурупий
Урок создан: 25 Марта 2009
Просмотров: 121160
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^