以前は個別に画像で作成したり、backgroundでベース画像を設定していた『ボタン風リンク』をCSS3で作る方法です。
今回は、border-radiusのみを使い、フラットな角丸ベースを作ってみます。
.kadomaru {
width:200px; /* ボックス範囲 */
background:#136ac1; /* 背景色 */
border-radius:10px; /* 角丸（半径10px、すべての角に） */
color:#fff; /* テキストカラー */
line-height:46px; /* 行間46px（≒ボックスの高さ） */
text-align:center; /* テキスト中央寄せ */
}
↓上記CSSスタイルをあてた状態（リンクになっていません）
リンクテキスト
使いようによっては、コンテンツにつけるタブのデザインもOKですね
タブ
この場合は、border-radiusの数値を下記のように設定します。
border-radius:10px 10px 0 0; /* 数値は順に、左上・右上・右下・左下です */
数値は細かく指定できますが、混乱するかもしれないのでここでは触れません。
興味のある方は下記サイトを参考にしてみてください。
次に、ボタンリンクを作成する場合は、<a>にスタイルを設定します。
『.btn』で囲まれた<a>にスタイルをあてる書き方です。今回はソースの各行にコメントを入れますので、邪魔であればコメントは削除してください。
ボタンHTML（最小限）
<div class="btn"> <a href="">リンクテキスト</a> </div>
ボタンCSS（シンプルカラー・角丸）
.btn {
display: inline-block;
}
.btn a {
display:block; /* ブロック要素にしてリンク範囲を作る */
width:200px; /* ボタンの幅 */
background:#136ac1; /* ボタンの背景色 */
border-radius:10px; /* 角丸（半径10px） */
color:#fff; /* リンクテキストのカラー */
line-height:46px; /* ボタンの高さ＋テキストを中央（上下方向）にする */
text-decoration:none; /* リンクの下線（装飾）を消す */
text-align:center; /* テキストを中央寄せ */
}
.btn a:hover {
background:#ddd; /* カーソルが乗った時の背景色 */
color:#136ac1; /* カーソルが乗った時のテキストカラー */
}
↓上記CSSスタイルをあてた状態