Как сделать кнопку-ссылку без зависаний/догрузки дополнительного изображения.

Когда я создавал новый дизайн для Нометы, а именно делал кнопки расположенные вверху блога я вспомнил как в прошлых дизайнах других сайтов появлялась небольшая, но все же не очень приятная проблема. Когда мы делаем меню или главные ссылки “На главную”, “Обо авторе”, “RSS” как в Номете. Мы хотим сделать их красивыми и поэтому обойтись свойствами CSS не всегда получается сделать что-то оригинальное. Поэтому некоторые из сайтостроителей используют графику. В этой статье я расскажу как избавиться от подвисаний/дозагрузки дополнительного изображения.

... Рекомендую сервис автоматической проверки ссылок - единственный сервис, где можно проверить ссылочного донора на спамность. Bсе биржи ссылок и сервисы в одном интерфейсе. Регистрация. ...

Приведу вам код из CSS как создаются кнопки-ссылки (пример кнопки с Нометы).
1 способ (не правильный):

.menu a{
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
text-decoration: underline;
color: #EEE;
font-size: 14px;
font-weight: bold;
background-image: url(http://www.nometa.ru/menu-a.gif);
background-position: left;
margin-left: 8px;
margin-right: 8px;
display: block;
}
.menu a:hover{
background-image: url(http://www.nometa.ru/menu-a-hover.gif);
color: #FFF;
text-decoration: none;
}

Если использовать код в CSS такого вида ↑, то при наведении на ссылку будет дополнительная загрузка и через пару-тройку секунд, а иногда бывает зависает и время тратиться больше. Да и чем меньше отдельных картинок загружается со страничке – тем лучше (быстрее будет и загрузка самого сайта). Поэтому нужно делать не два разных файла с изображением. В 1-ом способе это будут две разных картинки одного и того же размер…