border-radius(角丸)の使用例

以前は個別に画像で作成したり、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スタイルをあてた状態