Не понял, а в чём понт?
Всё также ie8+, только добавлен javascript, лишний элемент, и лишняя картинка.

фокус теряется - кнопка отклеивается
лишний элемент, - убрал

Ну тут уж без опа непоймёшь какое именно поведение ему нужно было на самом деле.) Каждое поведение по-своему логично и зависит от того что изображает картинка.
И если уж использовать javascript, то не вижу никаого смысла в применении некросбраузерного селектора аттрибутов вместо обычного класса, как, впрочем, не вижу смысла и в использовании пустого изображения(загрузка кторого тоже слегка тормозит загрузкy остального контента):

<style type="text/css">
#button {
	background:url(http://s1.uploads.ru/i/EFYyv.png) 0 100% no-repeat;
	width:91px;
	height:22px;
    border:0;
}
#button:hover , #button.pressed{
	background-position: left top;
}
</style>
<input type="button" id="button" onclick="this.className='pressed'"/>

P.S. Я вообще считаю, что ему достатчно было моего первого варианте.)

Aetae,
Имхо я так понял - что ему нужна кнопка картинкой
Хотя тады Ваш последний вариант с <input type="image" - подойдет

У button стиль нун чистить от бордеров

Лучше делать грамотней :) Обе картинки совместить в одну и менять позицию через hover, например:

<table class="myimage"><th/></table>

.myimage {width:50; height:20; background-image:url('ссылка');}
.myimage:hover {background-position:50;}

Aetae, извиняюсь, не разглядывал все посты. :)

Сталкнулся с проблемой. Есть две кнопки из двойной картинки, всё как бы замечательно и прочее, но только тогда, когда кнопки вставляю по отдельности. А когда кставляю две сразу, то происходит следущее: обе кнопки показывают мне картинку №2. Что именно нужно изменить в коде? :-)

<style type="text/css">
#MyKnop {
background:url(адрес кнопки-картинки №1) 0 100% no-repeat;
width:427px;
height:66px;
border:0;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a href="адрес страницы №1" class="button" title="описание при наведении на кнопку-картинку №1"><img id="MyKnop"/></a>


<style type="text/css">
#MyKnop {
background:url(адрес кнопки-картинки №2) 0 100% no-repeat;
width:427px;
height:66px;
border:0;
}
#MyKnop:hover {
background-position: 0 0;
}
a.wrp[href="#"] #MyKnop{
background-position: 0 0!important;
}
</style>
<a href="адрес страницы №2" class="button" title="описание при наведении на кнопку-картинку №2"><img id="MyKnop"/></a>

NekPoMaHt,
id уникально не повторяется в нормальной странице

Спасибо, уже разобрался :)