伪类选择器之动态伪类：美化1按钮实例

<!DOCTYPE html>
<html>
<head>
    <title>美化按钮</title>
    <style>
        .download-info{
            text-align: center;
        }
        /*默认状态下的效果*/
        .btn{
            background-color: #0074cc;
            *background-color: #0055cc;
            /*渐变背景*/
            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;
            border:1px solid #cccccc;
            *border: 0;
            border-color: #ccc;
            /*css3的色彩模块*/
            border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
            border-radius: 6px;
            color:#fff;
            cursor: pointer;
            font-size:20px;
            font-weight: normal;
            filter:progid:dximagetransfrom.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);
            filter:progid:dximagetransfrom.microsoft.gradient(enable=false);
            line-height: normal;
            padding: 14px 24px;
            text-align: center;
            /**css3文字阴影部分*/
            text-shadow: 0 -1px 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: #0044ab3;
            color:#ffffff;
            text-decoration: none;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
            /*动画效果*/
            -webkit-transition:background-position 0.1s linear;
            -moz-transition:background-position 0.1s linear;
            -ms-transition:background-position 0.1s linear;
            -o-transition:background-position 0.1s linear;
            transition:background-position 0.1s linear;
        }
        /*点击时效果*/
        .btn:active{
            background-color: #0055cc;
            *background-color: #004ab3;
            background-color: #00409 \9;
            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;
        }
    </style>
</head>
<body>
<div class="download-info">
    <a href="#" class="btn">View  project on GitHub</a>
</div>
</body>
</html>