Верстка кнопки для HTML-страницы, которая работает через тег <a> (т.е. с нее можно, например, скопировать адресс ссылки по правому клику в браузере), собранной из CSS-спрайта. Все картинки: края, фон, края и те же элементы при наведении собраны в один CSS-спрайт.
Итак, HTML-код кнопки такой:
CSS-спрайт для нее выглядит так:
Кратко суть верстки: внешний элемент a поставляет картинку начала кнопки (левая часть) и делать отступ слева на ширину это картинки, первый вложенный span добавляет конец кнопки и отступ справа, второй вложенный span заливает фон кнопки и объявляет ее высоту. Последний вложенный span нужен для размещения текста кнопки по-середине.
Т.к. элементы спрайта прозрачные, необходимо избегать наложения одного элемента на другой. Именно поэтому нижний элемент обрезан слева.
Тестировалась и работает правильно в IE 7, Opera 10, Firefox 3.5, Safari 3.1.2, Chrome 3.0.195.27.