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