瀚海沙

css3制作按钮各种状态下的效果：

html代码如下：

<div class="download-info">
  <a href="#" class="btn">View project on Github</a>
</div>

.download-info{
  text-align:center;
}
/*默认状态按钮效果*/
.btn{
  background-color:#0074cc;
  *background-color:#0055cc;
/*css3渐变背景*/
  background-image:-ms-linear-gradient(top,#0088cc, #0055cc);
  background-image: -webkit-gradient(linear,0 0, 0 100%, from(#0088cc), to(#0055cc));
  background-image:-webkit-linear-gradient(top, #0088cc, #0055cc);
  background-image:-o-linear-gradient(top,#0088cc,#0055cc);
  background-image:-moz-linear-gradient(top,#0088cc,#0055cc);
  background-image:linear-gradient(top,#0088cc,#0055cc);
  background-repeat: repeat-x;
  display:inline-block;
  *display: inline;
  border:1px solid #ccc;
  *border:0;
  border-color:#ccc;
/*css3色彩模块*/
  border-color:rgba(0,0,0,0.1) raba(0,0,0,0.1) rgba(0,0,0,0.25);
  border-radius:6px;
  color:#ffffff;
  cursor:pointer;
  font-size:20px;
  font-weight:normal;
  filter:progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
  filter:progid:dximagetransform.microsoft.gradient(enabled=false); line-height: normal;
  padding:14px 24px;
  text-align:center;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
  text-decoration: none;
  vertical-align: middle;
  *zoom:1;
}
/*悬浮状态按钮效果*/
.btn:hover{
  background-position:0 -15px;
  background-color:#0055cc;
  *background-color: #004ab3;
  color:#ffffff;
  text-decoration: none;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
/*css3动画效果*/
  -webkit-transition:background-position 0.1s linear;
  -moz-transiton:background-position 0.1s linear;
  -o-transition:background-position 0.1s linear;
  transiton:background-postion 0.1s linear;
}
/*点击按钮效果*/
.btn:active{
  background-color:#0055cc;
  *background-color:#004ab3;
  background-color:#004099;
  background-image: none;
  outline:0;
/*盒子阴影效果*/
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0,0,0,0.05);
  color:rgba(255,255,255,0.75);
}
/*获得焦点按钮效果*/
.btn:focus{
  outline: thin dotted #333;
  outline:5px auto -webkit-focus-ring-color;
  outline-offset:-2px;
}

默认效果如下：

悬浮状态效果如下：

点击时按钮效果如下：