CSS 漂亮的渐变按钮，悬停所有CSS
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 漂亮的渐变按钮，悬停所有CSS相关的知识，希望对你有一定的参考价值。
<style>
.boxGrn {
display:inline;
float:left;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
width:174px; height:38px;
border-top:1px solid #666;
background: -o-linear-gradient(top, #87C031 0%, #618A13 100%);
background: -moz-linear-gradient(top, #87C031 0%, #618A13 100%);
background: -webkit-linear-gradient(top, #87C031 0%, #618A13 100%);
background: -ms-linear-gradient(top, #87C031 0%, #618A13 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#87C031), to(#618A13));
background: linear-gradient(top, #87C031 0%, #618A13 100%);
}
a.buttonGrn:link, a.buttonGrn:visited {
text-transform:uppercase;
display:inline;
float:left;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
width:160px; height:26px;
margin:5px 6px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#fff; line-height:27px; font-weight:bold; text-decoration:none;
padding-left:26px;
background: -o-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0)), color-stop(.5,rgba(0,0,0,0)), color-stop(.5,rgba(0,0,0,.2)));
background: linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) %50, rgba(0,0,0,0) 100%);
background-position:0px 0px;
background-repeat:no-repeat;
background-color:rgba(156,209,78,.6);
-webkit-border-radius:4px; border-radius:4px;
-webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.8); box-shadow:0px 1px 5px rgba(0,0,0,0.8);
-o-transition:all 0.4s ease; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; transition:all 0.4s ease;
}
a.buttonGrn:hover, a.buttonGrn:focus {
color:#333;
background-color:rgba(255,255,255,1);
-webkit-box-shadow:0px 1px 6px rgba(0,0,0,1); box-shadow:0px 1px 6px rgba(0,0,0,1);
}
���¢�¯�¿�½�¯�¿�½</style>
<div class="boxGrn">
<a href="javascript:;" onclick="return false;" class="buttonGrn">Hows my Button?</a>
</div>���¢�¯�¿�½�¯�¿�½以上是关于CSS 漂亮的渐变按钮，悬停所有CSS的主要内容，如果未能解决你的问题，请参考以下文章