<h4>参考：<a href='http://naioo.com/blog/css3-buttons-without-any-images/' target='_blank'>CSS3 Buttons Without Any Images</a></h4>
<style type="text/css">
#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,
.button:visited {
position:relative;
color:#333!important;
text-shadow:1px 1px 0px #eaeaea;
margin:0; padding:7px 10px;
border:1px solid #6e6e6e;
text-decoration:none;
background:#ccc;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#fcfcfc),to(#bbbbbb));
background:-moz-linear-gradient(top,#bbbbbb,#fcfcfc);
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0px 0px 2px #ccc;
-webkit-box-shadow:0px 0px 2px #ccc;
box-shadow:0px 0px 2px #ccc;
behavior:url(pie/PIE.htc);
}
.button:hover {
background:#eee;
}
.button:active, .button:focus {
background:#eee;
background:-webkit-gradient(linear,0% 100%,0% 0%,from(#bbbbbb),to(#fcfcfc));
background:-moz-linear-gradient(bottom,#bbbbbb,#fcfcfc);
}
.button:disabled {
color:#848484!important;
text-shadow:1px 1px 0px #eaeaea;
background:#dcdcdc;
}
#dark .button {
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
behavior:url(pie/PIE.htc);
}
</style>
<div id="light">
<a href="#" class="button">ボタン</a>
<input type="button" class="button" value="Input Button" />
<input type="button" class="button" value="Input Button" disabled="disabled" />
<button class="button">Button</button>
<button class="button" disabled="disabled">Button</button>
</div>
<div id="dark">
<a href="#" class="button">ボタン</a>
<input type="button" class="button" value="Input Button" />
<input type="button" class="button" value="Input Button" disabled="disabled" />
<button class="button">Button</button>
<button class="button" disabled="disabled">Button</button>
</div>