<h4>参考:<a href='http://www.darrenhoyt.com/2009/09/20/better-button-and-nav-interactions/' target='_blank'>Better Button and Nav Interactions</a></h4>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('a#testbutton').hover(function() {
$(this).fadeTo("fast", 1);
}, function() {
$(this).fadeTo("fast", .85);
});
});
</script>
<style type="text/css">
#dark {
background-color:#333;
border:1px solid #000;
margin:20px auto; padding:20px;
color:#fff;
overflow:hidden;
}
#light{
background-color:#fff;
border:1px solid #dedede;
margin:20px auto; padding:20px;
overflow:hidden;
}
.testbutton,
.testbutton:visited {
display:block;
background:url(/content/img/css/simple_button.png) repeat-x;
width:200px;
margin:0 5px; padding:10px 0;
text-align:center;
border:1px solid #608925;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.8);
font-weight:bold;
text-transform:uppercase;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#FFF!important;
text-decoration:none;
opacity:.85;
vertical-align:middle;
float:left;
}
.testbutton:hover {
border-color:#49671d;
}
.testbutton:active {
background-position:0 -200px;
padding:11px 0 9px;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.8);
}
</style>
<div id="light">
<a href="#" class="testbutton">Take a Tour</a>
<input type="button" class="testbutton" value="Input Button" />
<button class="testbutton">Button</button>
</div>
<div id="dark">
<a href="#" class="testbutton">Take a Tour</a>
<input type="button" class="testbutton" value="Input Button" />
<button class="testbutton">Button</button>
</div>