CSS3によるボタン

最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン(>等)を加えることをしますが、今回はグラデーション影(box-shadow)を利用しました。

ボタンのサンプル HTML

<div class="btn">
  <a href="hoge.html">ボタンの名称</a>
</div>

ボタンのサンプル CSS

.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でカーソルが乗った時(離れた時)のアニメーションを入れています。