<h4>参照:<a href='http://css3button.net/'>CSS3 Button Generator</a></h4>
<style type="text/css">
#dark,
#light{
width:210px;
}
#dark {
background-color:#333;
border:1px solid #000;
margin:20px auto; padding:20px;
color:#fff;
}
#light{
background-color:#fff;
border:1px solid #dedede;
margin:20px auto; padding:20px;
}
.button {
position:relative; /* PIE.htc対策 */
border:3px solid #ffffff;
font-size:14px;
text-decoration:none;
color:#333!important;
vertical-align:middle;
margin:0; padding:10px 20px;
font-weight:bold;
background:#f7ff00;
background:-moz-linear-gradient(top,#f7ff00 0%,#ccc);
background:-webkit-gradient(linear, left top, left bottom,from(#f7ff00),to(#ffbf00));
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-moz-box-shadow:2px 2px 3px #ccc;
-webkit-box-shadow:2px 2px 3px #ccc;
box-shadow:2px 2px 3px #ccc;
text-shadow:1px 1px 1px #fff;
behavior:url(pie/PIE.htc);
}
#dark .button {
-moz-box-shadow:2px 2px 3px #000;
-webkit-box-shadow:2px 2px 3px #000;
box-shadow:2px 2px 3px #000;
}
</style>
<div id="light">
<a href="#" class="button">ボタン</a>
<input type="button" class="button" value="Button" />
</div>
<div id="dark">
<a href="#" class="button">ボタン</a>
<input type="button" class="button" value="Button" />
</div>