<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<h4>参照：<a href='http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba' target='_blank'>Super Awesome Buttons with CSS3 and RGBA</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;
}
.awesome, .awesome:visited {
border:0;
background: #222 url(/content/img/css/alert-overlay.png) repeat-x;
display: inline-block;
margin:0; padding: 5px 10px 6px;
vertical-align:middle;
line-height:1;
color: #fff;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
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;
}
.awesome:hover { background-color: #111; color: #fff; }
.awesome:active { top: 1px; }
.small.awesome, .small.awesome:visited { font-size: 11px; padding: ; }
.awesome, .awesome:visited,
.medium.awesome, .medium.awesome:visited { font-size: 13px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
.large.awesome, .large.awesome:visited { font-size: 14px; padding: 8px 14px 9px; }
.green.awesome, .green.awesome:visited { background-color: #91bd09; }
.green.awesome:hover { background-color: #749a02; }
.blue.awesome, .blue.awesome:visited { background-color: #2daebf; }
.blue.awesome:hover { background-color: #007d9a; }
.red.awesome, .red.awesome:visited { background-color: #e33100; }
.red.awesome:hover { background-color: #872300; }
.magenta.awesome, .magenta.awesome:visited { background-color: #a9014b; }
.magenta.awesome:hover { background-color: #630030; }
.orange.awesome, .orange.awesome:visited { background-color: #ff5c00; }
.orange.awesome:hover { background-color: #d45500; }
.yellow.awesome, .yellow.awesome:visited { background-color: #ffb515; }
.yellow.awesome:hover { background-color: #fc9200; }
</style>
<div id="light">
<p>白背景</p>
<p><a class="awesome">Button</a></p>
<p>
<a class="small awesome green">Green Button</a>
<a class="small awesome blue">Blue Button</a>
<a class="small awesome red">Red Button</a>
<a class="small awesome magenta">Magenta Button</a>
<a class="small awesome orange">Orange Button</a>
<a class="small awesome yellow">Yellow Button</a>
</p>
<p>
<a class="midium awesome green">Green Button</a>
<a class="midium awesome blue">Blue Button</a>
<a class="midium awesome red">Red Button</a>
</p>
<p>
<a class="midium awesome magenta">Magenta Button</a>
<a class="midium awesome orange">Orange Button</a>
<a class="midium awesome yellow">Yellow Button</a>
</p>
<p>
<a class="large awesome green">Green Button</a>
<a class="large awesome blue">Blue Button</a>
<a class="large awesome red">Red Button</a>
</p>
<p>
<a class="large awesome magenta">Magenta Button</a>
<a class="large awesome orange">Orange Button</a>
<a class="large awesome yellow">Yellow Button</a>
</p>
<p>
<input type="button" class="small awesome green" value="Input Button" />
<input type="button" class="midium awesome blue" value="Input Button" />
<input type="button" class="large awesome red" value="Input Button" />
</p>
<p>
<button class="small awesome green">Button</button>
<button class="midium awesome blue">Button</button>
<button class="large awesome red">Button</button>
</p>
</div>
<div id="dark">
<p>黒背景</p>
<p><a class="awesome">Button</a></p>
<p>
<a class="small awesome green">Green Button</a>
<a class="small awesome blue">Blue Button</a>
<a class="small awesome red">Red Button</a>
<a class="small awesome magenta">Magenta Button</a>
<a class="small awesome orange">Orange Button</a>
<a class="small awesome yellow">Yellow Button</a>
</p>
<p>
<a class="midium awesome green">Green Button</a>
<a class="midium awesome blue">Blue Button</a>
<a class="midium awesome red">Red Button</a>
</p>
<p>
<a class="midium awesome magenta">Magenta Button</a>
<a class="midium awesome orange">Orange Button</a>
<a class="midium awesome yellow">Yellow Button</a>
</p>
<p>
<a class="large awesome green">Green Button</a>
<a class="large awesome blue">Blue Button</a>
<a class="large awesome red">Red Button</a>
</p>
<p>
<a class="large awesome magenta">Magenta Button</a>
<a class="large awesome orange">Orange Button</a>
<a class="large awesome yellow">Yellow Button</a>
</p>
<p>
<input type="button" class="small awesome green" value="Input Button" />
<input type="button" class="midium awesome blue" value="Input Button" />
<input type="button" class="large awesome red" value="Input Button" />
</p>
<p>
<button class="small awesome green">Button</button>
<button class="midium awesome blue">Button</button>
<button class="large awesome red">Button</button>
</p>
</div>