最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン（>等）を加えることをしますが、今回はグラデーション影（box-shadow）を利用しました。
ボタンのサンプル HTML
|
1 2 3 |
<div class="btn"> <a href="hoge.html">ボタンの名称</a> </div> |
ボタンのサンプル CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.btn a { display:block; background:linear-gradient(#f8f8f8, #eee); border:1px solid #ccc; border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,0.3); color:#333; font-size:100%; font-weight:bold; text-decoration:none; line-height:46px; text-align:center; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .btn a:hover { background:linear-gradient(#eee, #f8f8f8); box-shadow:0 0 1px rgba(0,0,0,0.3); color: #f29e02; } |
↓上記CSSスタイルをあてた状態（ボックスの位置設定を別途入れています。）
マウスカーソルをオンにした時にグラデーションを反転、影の幅を少なくしています。
transitionでカーソルが乗った時（離れた時）のアニメーションを入れています。