body{padding:0;margin:0}.border-button{cursor:pointer;text-decoration:none;display:inline-block;padding:20px 30px;margin:10px 20px;position:relative;color:#fff;border:1px solid hsla(0,0%,100%,.4);background:none;font-weight:300;text-transform:uppercase;letter-spacing:2px;font-size:32px;text-align:center;transition:.8s cubic-bezier(.165,.84,.44,1)}.border-button:after,.border-button:before{content:"";position:absolute;width:0;height:0;opacity:0;box-sizing:border-box}.border-button:before{bottom:0;left:0;border-left:1px solid #fff;border-top:1px solid #fff;transition:opacity 0s ease .8s,width .2s ease .4s,height .2s ease .6s}.border-button:after{top:0;right:0;border-right:1px solid #fff;border-bottom:1px solid #fff;transition:opacity 0s ease .4s,width .2s ease,height .2s ease .2s}.border-button:hover:after,.border-button:hover:before{height:100%;width:100%;opacity:1}.border-button:hover:before{transition:opacity 0s ease 0s,height .2s ease,width .2s ease .2s}.border-button:hover:after{transition:opacity 0s ease .4s,height .2s ease .4s,width .2s ease .6s}.border-button:hover{background:hsla(0,0%,100%,.2)}