Загрузка. Пожалуйста, подождите...

Главная страница → → → → Урок по верстке. Активная кнопка (эффект при наведении)

Урок по верстке. Активная кнопка (эффект при наведении)

В этом уроке я Вам расскажу как можно сделать, чтоб при наведении на кнопку, менялся фон. Есть два варианта. Первый - это когда есть две картинки и с помощью a:hover указываем бэкграундом ту, на которую должно менятся при наведении. Но, мы рассмотрим вариант, когда картинка одна, но состоит из двух частей, так как при первом варианте вторая подгружается не сразу при загрузке сайта, а только по требованию, тоесть только при наведении и это может занять некоторое время, что при не очень скоростном интернете довольно таки заметно. И так, возьмем за основу такое изображение, состоящие из двух нужных нам картинок: Урок по верстке. Активная кнопка
Для тако кнопки теперь напишем код css:
a.button{
width:29px;
height:49px;
display:block;
background:url(../images/button.gif) 0 0 no-repeat;
}

a.button:hover{
background-position:0 -49px;
}
И html-код, который можно применить для нашей кнопочки:
<a href="#" class="button"></a>
Благодаря display:block; мы можем использовать тег a как блочный элемент и присваивать ему бэкграунд. Таким образом, избавимся от необходимости использования лишних элементов в верстке вашего шаблона.

Уроки дизайна

Обновлено: 11 мая 2011

верстка верстка шаблона hover активная кнопка смена фона при наведении сделать активную кнопку с помощью css

1159 27.04.11
Информация
Только зарегистрированные пользователи могут оставлять в данной новости свои комментарии.