<h4>参照:<a href='http://www.htmldrive.net/items/show/795/Nice-CSS3-buttons.html' target='_blank'>Nice CSS3 buttons</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 {
border:0;
background:#222 url(/content/img/css/overlay.png) repeat-x;
display:inline-block;
padding:5px 10px 6px;
color:#fff;
text-decoration:none;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.6);
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
border-bottom:1px solid rgba(0,0,0,0.25);
position:relative;
cursor:pointer
}
.button:hover { background-color:#111; color:#fff; }
.button:active { top:1px; }
.small.button, .small.button:visited { font-size:11px}
.button, .button:visited,
.medium.button, .medium.button:visited { font-size:13px;
font-weight:bold;
line-height:1;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
}
.large.button, .large.button:visited {
font-size:14px;
padding:8px 14px 9px;
}
.super.button, .super.button:visited {
font-size:34px;
padding:8px 14px 9px;
}
.pink.button, .magenta.button:visited { background-color:#e22092; }
.pink.button:hover { background-color:#c81e82; }
.green.button, .green.button:visited { background-color:#91bd09; }
.green.button:hover { background-color:#749a02; }
.red.button, .red.button:visited { background-color:#e62727; }
.red.button:hover { background-color:#cf2525; }
.orange.button, .orange.button:visited { background-color:#ff5c00; }
.orange.button:hover { background-color:#d45500; }
.blue.button, .blue.button:visited { background-color:#2981e4; }
.blue.button:hover { background-color:#2575cf; }
.yellow.button, .yellow.button:visited { background-color:#ffb515; }
.yellow.button:hover { background-color:#fc9200; }
</style>
<div id="light">
<p>白背景</p>
<p><a class="button">Button</a> <a class="super button pink">Pink Button</a></p>
<p><a class="small button green">Green Button</a> <a class="small button blue">Blue Button</a> <a class="small button red">Red Button</a> <a class="small button orange">Orange Button</a> <a class="small button yellow">Yellow Button</a></p>
<p><a class="midium button green">Green Button</a> <a class="midium button blue">Blue Button</a> <a class="midium button red">Red Button</a> <a class="midium button orange">Orange Button</a> <a class="midium button yellow">Yellow Button</a></p>
<p><a class="large button green">Green Button</a> <a class="large button blue">Blue Button</a> <a class="large button red">Red Button</a> <a class="large button orange">Orange Button</a> <a class="large button yellow">Yellow Button</a></p>
<p>
<input type="button" class="small button green" value="Input Button" />
<input type="button" class="midium button blue" value="Input Button" />
<input type="button" class="large button red" value="Input Button" />
</p>
<p>
<button class="small button orange">Button</button>
<button class="midium button yellow">Button</button>
<button class="large button pink">Button</button>
</p>
</div>
<div id="dark">
<p>黒背景</p>
<p><a class="button">Button</a> <a class="super button pink">Pink Button</a></p>
<p><a class="small button green">Green Button</a> <a class="small button blue">Blue Button</a> <a class="small button red">Red Button</a> <a class="small button orange">Orange Button</a> <a class="small button yellow">Yellow Button</a></p>
<p><a class="midium button green">Green Button</a> <a class="midium button blue">Blue Button</a> <a class="midium button red">Red Button</a> <a class="midium button orange">Orange Button</a> <a class="midium button yellow">Yellow Button</a></p>
<p><a class="large button green">Green Button</a> <a class="large button blue">Blue Button</a> <a class="large button red">Red Button</a> <a class="large button orange">Orange Button</a> <a class="large button yellow">Yellow Button</a></p>
<p>
<input type="button" class="small button green" value="Input Button" />
<input type="button" class="midium button blue" value="Input Button" />
<input type="button" class="large button red" value="Input Button" />
</p>
<p>
<button class="small button orange">Button</button>
<button class="midium button yellow">Button</button>
<button class="large button pink">Button</button>
</p>
</div>