CSS-кнопка с реакцией на наведение

Верстка кнопки для -страницы, которая работает через тег <a> (т.е. с нее можно, например, скопировать адресс ссылки по правому клику в браузере), собранной из -спрайта. Все картинки: края, фон, края и те же элементы при наведении собраны в один -спрайт.

Итак, HTML-код кнопки такой:

CSS-спрайт для нее выглядит так:

Кратко суть верстки: внешний элемент a поставляет картинку начала кнопки (левая часть) и делать отступ слева на ширину это картинки, первый вложенный span добавляет конец кнопки и отступ справа, второй вложенный span заливает фон кнопки и объявляет ее высоту.  Последний вложенный span нужен для размещения текста кнопки по-середине.

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

Тестировалась и работает правильно в IE 7, Opera 10, Firefox 3.5, Safari 3.1.2, Chrome 3.0.195.27.

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

 

Об авторе Валера Леонтьев

Программист PHP/MySQL.

Запись опубликована в рубрике PC, Web, Жизнь с метками , , . Добавьте в закладки постоянную ссылку.

Добавить комментарий