Смещение фона при наведении на кнопку при помощи css
Многие разработчики и дизайнеры ставят на Интернет ресурсы самые разнообразные кнопки, ведь просто ссылка не всегда визуально завлекает посетителя.
При этом возникает потребность в интерактивности данной кнопки. То есть ее изменения при наведении. Но обычный способ, при котором одно фоновое изображение заменяется на другое при наведение работает не эффективно. Если вы реализуете это на css или jаvascript, то вы убедитесь в том, что чем медленнее Интернет, тем больше пауза между заменой фонового изображения. Вы наводите на кнопку и она исчезает до того момента пока не подгрузиться второй фон-изображение.
Есть несколько способов решения этой проблемы. Самым простым является использование css смещения фона при наведении на кнопку. Не зря я указал именно css, так как больше ничего использовать не надо. Я имею в виду jаvascript и т.п. То есть получается, что мы делаем одно изображение и помещаем на него два рисунка кнопки, а то и три в зависимости от потребностей. Далее мы указываем в css - показать первое, а второе фоновое изображение здесь обрезается. При наведении на кнопку как раз таки и происходит смещение фона.
Этот способ позволяет создать интерактивную кнопку без использования jаvascript кода и, так как все изображение подгружается сразу, то не возникает ненужного мигания с исчезанием фона кнопки.
Далее рассмотрим пример. Есть следующая кнопка.
При наведении на нее нужно заменить ее на другой рисунок.
Объединяем два изображения в одно.
Прописываем код на css.
<style>
.button {
position:fixed;
top:20px;
left:20px;
width:247px;
height:219px;
background-image:url('knopka1-2.png');
}
.button:hover {
background-position: right 0px top 214px;
cursor:pointer;
}
</style>
Фиксируем кнопку вверху страницы при прмощи аттрибута position.
Вставляем все в HTML код.
<div class="button"></div>
При нажатии на кнопку нужно перейти по ссылке. Добавляем это в HTML код.
<a href="/"><div class="button"></div></a>
Результат, при наведении смещается фон.