这个button有点意思-css(4)

主要知识点:

transition
box-shadow

利用时间差完成描边的过程,样式可能有点丑，shadow不是重点…主要是学习用法

效果图片

btn.png

html文件

 

        button
 
  

css文件

   .a-box{
        text-align:center;
    }
    a{
        display: inline-block;
        margin: 10px 0;
        padding: 25px 50px;
        font-size: 20px;
        line-height: 0;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        font-weight: 700;
        transition: box-shadow ease-in 1s;
        box-shadow: 0 3px 3px -3px #ccc,0 2px 2px -2px rgba(255,255,255,.6),0 1px 1px -1px rgba(255,255,255,.8);
        overflow: hidden;
        position: relative;
        cursor: pointer;

    }
    a:before, a:after{
        box-sizing: border-box;
        border: 1px solid transparent;
        width: 0;
        height: 0;
        content: '';
        display: block;
        position: absolute;
    }
    a:after{
         bottom: 0;
         left: 0;
         -webkit-transition: border-color 0s ease-in .8s,height .2s ease-in .6s,width .2s ease-in .4s;
         transition: border-color 0s ease-in .8s,height .2s ease-in .6s,width .2s ease-in .4s;
     }
    a:before{
         top: 0;
         right: 0;
         -webkit-transition: border-color 0s ease-in .4s,height .2s ease-in .2s,width .2s ease-in;
         transition: border-color 0s ease-in .4s,height .2s ease-in .2s,width .2s ease-in;
     }
    a:hover{
        color: #638aba;
        box-shadow: 0 3px 3px  #ccc,0 2px 2px  rgba(255,255,255,.6),0 1px 1px rgba(255,255,255,.8);
    }
    a:hover:after{
         width: 100%;
         height: 100%;
         border-top-color: #638aba;
         border-left-color: #638aba;
         -webkit-transition: height .3s ease-out,width .3s ease-out .3s;
         transition: height .3s ease-out,width .3s ease-out .3s;
     }
    a:hover:before{
         width: 100%;
         height: 100%;
         border-bottom-color: #638aba;
         border-right-color: #638aba;
         -webkit-transition: border-color 0s ease-out .6s,height .3s ease-out .6s,width .3s ease-out .9s;
         transition: border-color 0s ease-out .6s,height .3s ease-out .6s,width .3s ease-out .9s;
     }

demo 请在chrome下预览（未写兼容性）