ボタンのように見えるリンクを用意したい場合、リンクを画像で用意してしまうと「選択できない・検索できない・文字サイズを変更できない・読み込みに時間が掛かる」など(画像化したことによる)デメリットが多々あって不便です。
そこで、リンク自体はテキスト(文字)のまま、スタイルシートを使ってボタンのように見えるよう装飾してみてはいかがでしょうか。以下はその表示例です。

上記のサンプルでは、3つのリンクがスタイルシートでボタンのように装飾されています。リンクテキスト(＝リンクに使われている文字)は、画像ではなくテキスト(文字)のままなので、範囲選択も可能、検索も可能、文字サイズも変更可能で、読み込みに時間はかかりません。

これらは単にリンク(a要素)に対して枠線や背景色を付加しているだけです。枠線の種類としては「でっぱったよう(凸型)に見える枠線（＝outset）」・「へっこんだよう(凹型)に見える枠線（＝inset）」を指定しています。
具体的には、下記のようなCSSソースを書きます。

border-style: outset; /* 凸型に見える */

上記のようにborder-styleプロパティに値「outset」を指定すると、全体がでっぱったように見える枠線色が描かれます。

border-style: inset; /* 凹型に見える */

上記のように、値を「inset」にすると、全体がへっこんだように見える枠線色が描かれます。
この値を使うことで、テキストをボタンのように装飾することができます。

全体のCSSソースは下記の通りです。

a {
   display: block; /* ★ブロック化 */
   margin: 0.1em;  /* 外側の余白 */
   padding: 0.3em; /* 内側の余白 */
   width: 5em;     /* 横幅 */
   float: left;    /* 続く内容を右側に */
   text-decoration: none; /* 下線を消す */
   
   background-color: #ffffcc; /* ★背景色 */
   color: #000080;            /* 文字色 */
   border-width: 2px;         /* ★枠線の太さ */
   border-style: outset;      /* ★凸型に見えるように */
   border-color: #ffff55;     /* ★枠線のベース色 */
}
a:hover {
   background-color: #ffffaa;  /* ★背景色 */
   color: red;                 /* 文字色 */
   border-style: inset;        /* ★凹型に見えるように */
   text-decoration: underline; /* 下線を引く */
}

最低限必要な装飾は「★」マークを付加した部分だけです。あとは、書かなくても構いません。書けば、冒頭のサンプルのように表示されます。とりあえず、コピー＆ペーストで使ってみて、値をいろいろ変えてみつつ使ってみると良いでしょう。

なお、「凹型に見える枠線色」や「凸型に見える枠線色」は、実際にどのような色で表示されるかはブラウザによって異なります。凹凸を表現するためには、明るい線と暗い線を描画する必要があるので、border-colorプロパティで指定した色がベースに使われますが、具体的な配色はブラウザが勝手に決めますから。事前に複数のブラウザで表示確認しておいた方が良さそうです。もし気に入らなければ、上下左右の枠線の色を自力で個別に指定する方が確実です。

※個人的には、Firefoxでの表示が一番ボタンっぽく見えます。(^_^;)

ボタンリンクの上にマウスポインタを「載せたとき」ではなく「押したとき」にだけ凹んだ装飾を適用したい

さて、上記のサンプルでは、ボタン型に装飾したリンクの上にマウスポインタを載せるだけで、ボタンが凹むようなデザインになっています。これは「マウスポインタが載ったとき」を示す疑似クラスhoverに対してスタイルを指定しているからです。

しかし、「ボタン」というのはクリックするまでは凹みません(押し下げられません)よね。そこで、マウスポインタの載せたときには表面の色を変えるだけに留めておき、ボタン型リンクを押した(クリックした)瞬間にだけ押し下げたように見せるデザインを作っておく方が、より自然な気がします。

マウスポインタが載ったタイミングで装飾を変更したい場合にはhover疑似クラスが使えるように、クリックされたタイミングで装飾を変更したい場合にはactive疑似クラスが使えます。例えば、以下のように「通常のリンク」→「マウスポインタが載った際のリンク(hover)」→「クリックされた際のリンク(active)」の順でスタイルを記述すると良いでしょう。

a {
   display: block; /* ★ブロック化 */
   margin: 0.1em;  /* 外側の余白 */
   padding: 0.3em; /* 内側の余白 */
   width: 5em;     /* 横幅 */
   float: left;    /* 続く内容を右側に */
   text-decoration: none; /* 下線を消す */
   
   background-color: #ffffcc; /* ★背景色 */
   color: #000080;            /* 文字色 */
   border-width: 2px;         /* ★枠線の太さ */
   border-style: outset;      /* ★凸型に見えるように */
   border-color: #ffff55;     /* ★枠線のベース色 */
}
a:hover {
   background-color: #aaffff;  /* ★背景色 */
}
a:active {
   background-color: #ffffaa;  /* ★背景色 */
   color: red;                 /* 文字色 */
   border-style: inset;        /* ★凹型に見えるように */
   text-decoration: underline; /* 下線を引く */
}

このCSSソースを使って冒頭の例を再度表示すると、以下のように見えます。

ただ、active疑似クラスを使ってリンクを装飾しても、クリックした直後にページを移動しちゃうわけですから、あんまり見えませんけども……。(^_^;;;
まあその辺は、本物のボタンでも同様ですしね。^^;
※上記のボタンリンクは、クリックしてもページ移動はしません。

(更新日：2016年02月19日)