CSS3でボタン作成

今年もカウントダウンであと3日となりました。

映画が好きな僕は、いろいろなものを見てきましたが、どれが良かったと聞かれても「どれ？」ってと聞き返してしまう。
強く印象に残ったものは特になかった。まぁ～、僕がサスペンス、ホラー、SF、アクション・・等々なので、感動ドラマはあまり見ないせいかもしれません。

ただ、漠然とストーリー性の薄いものを見て、後を引きずらないものを見たいだけかもしれませんね。つまり、考えなくて面白いと思える映画が良いのかも知れません。^^；

---------------------------------------------------------------------------------
今日はCSS3でボタンの作成をご紹介します。ただし、IEではまだ対応されていません。
確認は、Firefox、Chrome、Safariのいずれかで・・。

基本となるソースコードは以下のとおりです。

<section class="btn">
<p><button>ボタン</button></p>
</section>



上のボタンをCSS3でカスタマイズしてみます。

まず、一般的な手法でボタンの輪郭にボーダーを設定します。
上と左側にグレーの線、右と下側にグレーよりも濃い色をつけて、立体感を
与え、ボタンの大きさをパディングで調整します。
ボタンの文字は太字、#666の色を付け、マウスを重ねるとポインターの形にします。

.btn button {
border-top:1px solid #ccc;
border-right:1px solid #999;
border-bottom:1px solid #999;
border-left:1px solid #ccc;
padding:5px 20px;
font-weight:bold;
cursor:pointer;
color:#666;
}


次は、ボックスの角丸とボックスと文字の影付きを付けてみます。
これは、Safari、Firefox、Chromeの各プロパティで記述します。
まず、
radiusプロパティでボックスのコーナーを角丸（3px）にします。
次に
shadowプロパティを使って影付きを設定します。
見てもらうと分かるように4つの値が指定できます。
横方向のずれ、下方向のずれ、ぼかし具合、影の色の順です。
また、カンマで複数の影が指定ができます。

.btn button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-shadow: 0 -1px 1px #FFF, -1px 0 1px #FFF, 1px 0 1px #aaa;
-webkit-box-shadow: 1px 1px 2px #E7E7E7;
-moz-box-shadow: 1px 1px 2px #E7E7E7;
padding: 5px 20px;
font-weight: bold;
cursor: pointer;
color: #666;
}



最後にボタンにグラデーションを付けてみます。
以下のプロパティを追加します。Firefox、Safariに対応して記述しています。
上から下への線形のグラデーションで、上が白、下半面をグレー色となります。

background: -moz-linear-gradient(top, #fff, #F1F1F1 1%, #F1F1F1 50%, #DFDFDF 99%, #ccc);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.01, #F1F1F1), color-stop(0.5, #F1F1F1), color-stop(0.99, #DFDFDF), to(#ccc));



もし、ボタンを押したときにボタンが押されているように見せるには、擬似クラスactiveにスタイルを用いると良いでしょうね。
.btn button:active {
background:#eee;
padding:6px 20px 4px;
}

いろいろなアレンジができるようです。お試しください。