• testボタン
• testボタン2
• testボタン3
• testボタン4
• testボタン5
• 

上下に2つの画像を配置した半透明のPNG画像（上の右端）を、色を付けた横80px、縦30pxのブロックの背景に指定して、
.button1 a { display: block; width: 80px; height: 30px; …
background: #4a4a4a url(../img/button.png) no-repeat 0 0; }

オンマウス時（フォーカス、アクティブも同じ）にポジションを縦方向に40pxずらしています。
.button1 a:hover, .button1 a:focus, .button1 a:active { background-position: 0 -40px; }

PNG画像は1枚だけで、バックグラウンドの色を変えて使い回すことができます。横サイズは固定です。
赤いボタンと青いボタンは、オンマウス時の文字色も変えています。