最近流行りのフラットデザインではなく、立体的なボタンのサンプルです。
フラットデザインではボタンからグラデーションや影を排除し、明確にリンクとわかるアイコン（>等）を加えることをしますが、今回はグラデーション影（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;
}