.button01 {
	height: 30px;
	width: 150px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color: #CCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #CCC;
	line-height: 30px;
	text-align: center;
}

    

次にグラデーションを。 mozilla系とwebkit系では指定が違います。

    .button02 {
	height: 30px;
	width: 150px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	background-color: #CCC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #CCC;
	line-height: 30px;
	text-align: center;
	background: -moz-linear-gradient(top, #CCC, #333);　/* Firefox用 */  
    background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#333));　/* Safari,Google Chrome用 */  
}

参考ＵＲＬ：http://www.css-lecture.com/log/css3/css3-gradient.html