ちょっと前からCSSでフラットな立体ボタンは色んな所で目にしますが、一回自分でもつくろうかな〜と思ってたのに、なかなかその手のデザイン案件に当たらなかったので自分で作ってみることにしましたので、備忘録。

もちろんクリックもしくはロールオーバー時はボタンらしくカチッとしたアクションを行うボタンです。

まず、立体的なボタンを「box-shadow」でつくる

HTMLはごくごく一般的なソースになります。

【HTML】

<p class="solid_btn"><a href="#">立体ボタン</a></p>

立体部分はCSS3のボックスシャドウでぼかしを「0」にしてくっきりした影をつけるイメージです。

【CSS】

.solid_btn a{
background-color:#f70841;
padding:12px 40px;
text-decoration:none;
color:#fff;
box-shadow:0px 6px 0px #c30b37;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

「box-shadow」のピクセルの値が3つの場合は左から「水平方向（横）」「垂直方向（縦）」「ぼかし具合」の順番です。今回は垂直方向にぼかし無しのくっきり影が6px表示されることになります。

立体的に見せるので何よりもシンプルなのがこんな感じ

DEMO

【おさらい】border-radiusを四隅個別に設定する

今回、角丸（border-radius）で四隅の角度を個別に設定していますが、そちらのおさらい。
それぞれ右上、右下、左上、左下のプロパティ値があるので、それにpx値を設定すればおけ。

border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;

ベンダープレフィックスをつけると、たかが角丸つけるだけでこんな感じで長いソースになります。

/*右上*/
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
/*左上*/
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
/*右下*/
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
/*左下*/
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;

クリック時にカチッとなるボタン

ボタンらしく、クリック時に「カチッ」と動くアニメーションをつける場合は以下のCSSに変更

.solid_btn a{
background-color:#f70841;
padding:12px 40px;
position:relative;/*:activeのために基準値を設ける*/
text-decoration:none;
color:#fff;
box-shadow:0px 6px 0px #c30b37;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}

.solid_btn a:active {
color:#c30b37;
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
background-color:#f70841;
box-shadow:inset 0px -1px 0px #c30b37;
top:7px;
}

キモの部分は「.solid_btn a」のclassに「position:relative」で基準値を設けて、active時に「top」を7px（影で盛り上がった分）動かせば、カチッと動いたように見える仕組み。

active時に「box-shadow」も設定しておかないと、通常時のbox-shadowの値を引き継いで、ボタンがヘコんだ感じにならないので注意。

DEMO

※ロールオーバー時にカチッといさせた場合は「a:active」を「a:hover」に変えるだけ。

まとめ

ボタンの立体感をドロップシャドウで出すのってphotoshopぼレイヤースタイルでも度々やってた事なのですんなり理解できたかなと、後はposition配置とか理解できれば問題なく設置できるので、コレを元に色んなボタンのバリエーションを持っていければと思います。今回は以上です。