纯css3实现的动画按钮的实例教程

            -webkit-transition: all .3s ease-out;   
            -moz-transition: all .3s ease-out;   
            -ms-transition: all .3s ease-out;   
            -o-transition: all .3s ease-out;   
            transition: all .3s ease-out;   
        }   
           
        .btn i   
        {   
            opacity: 0;   
            position: absolute;   
            margin-top: -21px;   
            top: 2.5rem;   
            left: 120%;   
            -webkit-transition: all .3s ease-out;   
            -moz-transition: all .3s ease-out;   
            -ms-transition: all .3s ease-out;   
            -o-transition: all .3s ease-out;   
            transition: all .3s ease-out;   
        }   
           
        .btn:hover   
        {   
            background: rgba(255,255,255, .9);   
            border: 1px solid rgba(0,0,0,1);   
        }   
           
        .white .btn:hover   
        {   
            background: rgba(0,0,0, .02);