皆さんこんにちは。フリーのマークアップエンジニア草野と申します。
今日から普段のお仕事の中でちょっと役に立つコーディングのTipsや、
しっかり覚えておきたいHTML・CSSの基本ルールなどについて
こちらのブログで紹介していきたいと思います。
初回のテーマは「CSSだけでボタンをデザインしよう①」です。

１．ボタンのベースを作る

［サンプル１］

<p><a href="#" class="btn">ボタン</a></p>

 

.btn{
	display:inline-block; /*ブロック化*/
	padding:10px;
	background:#69C;
	color:#fff;
	text-align:center;
	text-decoration:none;
}
.btn:hover{
	background:#6CF;
}

まず基本となるボタンのベースを設定します。ボタン状のリンクを作るためにはまずa要素のdisplayプロパティを「inline」から「block」もしくは「inline-block」に変更（ブロック化）する必要があります。
幅や高さを指定したり、文字列の周囲に広いリンク領域を確保したりするために必ずどちらかを指定してください。block／inline-blockのどちらにするかは、widthを親要素の幅いっぱいに自動的に広げたいか、それとも文字列の長さに応じて自動的に伸縮するようにしたいか、という点で選択するとよいでしょう。
今回はボタン幅は文字列の長さに応じて自動的に伸縮するようにしておきたいので、inline-blockを指定しておきます。

２．角を丸くする

［サンプル２］

.btn{
	display:inline-block;
	padding:10px;
	background:#69C;
	color:#fff;
	text-align:center;
	text-decoration:none;
	border-radius: 5px; /*角を丸くする*/
}

角丸のボタンにする場合は「border-radius」プロパティを使用します。CSS3のプロパティになりますので、IE9から利用できます。
（IE8以下に角丸を適用したい場合は、「CSS3 PIE.htc」等の機能補完用スクリプトを利用するなどの別途対策が必要となります）

３．ボタンにbefore擬似要素で三角アイコンを追加する

［サンプル３］

<p><a href="#" class="btn btn_arw1">ボタン</a></p>

 

.btn_arw1:before{
	content:""; /*アイコン用の空オブジェクトを生成*/
	display:inline-block;
	width:0;
	height:0;
	border: transparent 4px solid; /*三角形のサイズ指定*/
	border-left-color: #fff; /*三角形の向き指定*/
	margin-right: 3px; /*位置調整*/
	margin-top: -3px;　/*位置調整*/
	vertical-align:middle;
}

アイコンを追加する方法はいろいろありますが、三角形のような基本図形であればCSSだけで表現が可能です。
まず.btn_arw1に「:before擬似要素※」を設定します。
:before擬似要素に対してconentプロパティで空のオブジェクトを生成しておき、これに三角形アイコンのデザインを施していきます。
三角形の実装にはborderプロパティを利用します。width/height共に0にした上で、透明色（transparent）の実線を適用します。
サイズ0の要素にborderを設定すると、borderは以下の図のような形に４分割されます。

後は矢印の向きと反対側のborder（右向き矢印ならborder-left）に色だけ設定してやれば三角形の出来上がりです。

上記コードの場合、出来上がる三角形の形状は二等辺三角形となりますが、各種数値を調整することで正三角形やその他の三角形も作成できます。その場合はやや仕組みが複雑になりますので、「CSS triangle generator」などのツールを活用すると良いでしょう。

いかがでしたか？
テキスト＋CSSでデザインすれば、文字の打替えやバリエーションの追加も自由にできますね。
次回はこのボタンに更にCSSで装飾を加えてバリエーションを追加していきます。
お楽しみに♪

• 
•