Do jednoho obrázku dám vše např.:

V CSS mu dám velikost jednoho buttonu, což v tomto případě je 150px*49px a odpozicování vrchního, tedy (0;0)

width: 150px;
height: 49px;
background: no-repeat url('/images/menu/button.png') 0 0;

Pak použiju :hover efekt v CSS a jen změním odpozicování na druhou část obrázku, tedy snížím o 49px dolů.

width: 150px;
height: 49px;
background: no-repeat url('/images/menu/button.png') 0 -49px;

Takže na webu se to zobrazí takto

A po najetí myši takto


*Webové stránky jsem už pár let nedělal, takže omluv mé "trapné" pojmy :P