こんにちは。フリーのマークアップエンジニア草野です。
今日は前回作った角丸ボタンにCSSで更に装飾を加えてリッチなボタンをデザインしていきます。

★１．ハイライト・シャドウを加える

［サンプル表示］

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

.btn{
	display:inline-block; 
	padding:10px;
	background:#69C;
	color:#fff;
	text-align:center;
	text-decoration:none;
	border-radius: 5px;
	box-shadow:
		-1px -1px 0 #ccc, /*ハイライト*/
		1px 1px 0 #000, /*シャドウ*/
		1px 1px 5px #666; /*ドロップシャドウ（ぼかし有り）*/
}

box-shadowは要素に影をつけることができるCSS3の新プロパティです。
box-shadowの基本書式は以下の通りとなります。

CSS3では「, (カンマ)」で値をつなぐことで、ひとつのプロパティに複数の値を持たせることができますので、左上方向にハイライト、右下方向にシャドウとしてそれぞれ1px幅のソリッド（ぼかし無し）な影を持たせて立体化し、更に３つ目に5px幅のボケ足を持ついわゆるドロップシャドウを追加しています。シャドウは必要であればいくつでも追加することができますので、いろいろ試してみるとよいでしょう。

★２．ボタン内側に立体感を出す

［サンプル表示］

.btn{
	/*省略*/
	box-shadow:
		-1px -1px 0 #D4EDFF,
		1px 1px 0 #369,
		1px 1px 5px #666,
		0 0 15px 2px rgba(0,51,153,0.5) inset; /*内側のシャドウ*/
}

box-shadowは通常要素の外側に影をつけるものですが、「inset」を追加することで要素の内側にも影をつけることが可能（※）です。そこで今回は内側へのbox-shadowを利用してふんわりと立体感を追加することにします。

X座標,Y座標の値を0,0にすると、要素の周囲全体に均等に影をつける（光彩表現）が可能となります。
そのまま15pxのぼかし幅で内側に影をつけても微妙に平面的に見えるので、今回は更に2pxの「spread値」を追加しておきます。spread値とは、要素の境界線から指定した幅だけベタ塗りする領域を指します。オプション値なので普段は省略しておけば良いですが、追加する場合には必ずボカシ幅の次に記述する必要がありますので注意してください。
※insetによる内側へのbox-shadowは、CSS3 PIEでも再現できないので、IE8以下では使用できません。

★３．マウスオーバー時にフワッと変化させる

［サンプル表示］

.btn{
	/*省略*/
	transition: 0.5;
}

「:hoverでマウスが乗った時」など、要素の状態が変化したタイミングで滑らかにプロパティの値を変化させる「切り替えアニメーション効果」を追加するものがCSS3の「transiton」プロパティです。

transitonは

の４つのプロパティをひとつにまとめたショートハンドプロパティで、このうち必須なのは「transiton-duration」のみで他は省略可能です。単純にふわっと変化させたいだけの場合には今回のようにtransition-durationの値のみ設定しておけば簡単ですね。
※IE9以下非対応、Androidでは-webkit-プレフィックスが必要です。

★４．クリック時に「押した」感を出す

［サンプル表示］

.btn{
	/*省略*/
	position:relative; /*相対配置指定*/
}
.btn:active{
	left: 1px; /*右に1pxずらす*/
	top: 1px; /*下に1pxずらす*/
}

最後に、クリックした時に少し押し込むように右下に位置をずらすことで「押した感」を出してみましょう。
「クリックした時」というのは:active擬似クラスで設定することができます。
ここに「①自分自身の現在の位置を基準として」「②右下に1pxずつ位置をずらす」というスタイルを指定します。
まずpositionの値をrelativeにすることで「自分自身の現在地を基準として相対的に位置をずらす」ということが可能になります。そして次に:activeのタイミングで表示座標を右に1px、下に1pxずらすことで完成となります。
要素の座標を数値で指定するleft/right/top/bottomの各プロパティは、対象要素のpositionプロパティが「static（初期値）」以外の場合のみ有効となるので、忘れずにpositionの指定をするようにしておきましょう。

いかがでしたでしょうか？
CSSで何ができるか知っていればアイデア次第でいろいろな表現が可能になりますね。