ＷＥＢサイトにリンク用の押しボタンを構築してみてます。
まず、これがボタンの画像です。

このページでも使われているボタンですね。
このボタン画像はボタン工房で「３つの状態を縦に」でセーブしたpngファイルです。
マウスオーバー(ホバー)状態と押した状態にも対応しているのに気づいてもらえましたでしょうか？
それにちゃんとＴＩＰＳも表示されます。

で、これを書く為にはHTMLとCSSで記述します。

「ＣＳＳのコード」
#Buttons{
 position: relative;
 width: 100%;
}

#Buttons span{
 margin: 5px;
 width: 108px; /*ボタンの横サイズをピクセル数で*/
 float: left;
}

#Buttons span a{
 display: block;
 width: 100%;
 height: 20px;　/*ボタンの縦サイズをピクセル数で*/
 text-indent: -9999px;
 background-repeat: no-repeat;
 overflow: hidden ;
}

#Buttons span a:hover{
 background-repeat: no-repeat;
}

#Buttons span a:active{
 background-repeat: no-repeat;
}

#btnlink a,btnlink a:hover,btnlink a:active{ background-image: url(info_beta.png);}/*ボタンの画像urlを指定してください*/
#btnlink a{   background-position: 0 0; }
#btnlink a:hover{ background-position: 0 -20px; }/*ボタンの縦サイズで変更してください*/
#btnlink a:active{ background-position: 0 -40px; }/*ボタンの縦サイズで変更してください*/

「ＨＴＭＬのコード」
<div id="Buttons">
    <span id="btnlink" title="リンクボタンのテストです">
        <a href="http://hp.vector.co.jp/authors/VA047235/">&nbsp;</a>
    </span>
</div>

細かい説明は、その手のサイトに任せますが、これだけでマウスオーバー対応ボタンを作成できます。