不错的css按钮移过效果

   <style type="text/css">
        .u-btn{position:relative;display:inline-block;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;font-size:14px;margin:100px;}
        .u-btn-hollow{border:1px solid transparent;}
        .u-btn-hollow:before,.u-btn-hollow:after{content:'';position:absolute;-webkit-transition:all 250ms ease;-moz-transition:all 250ms ease;transition:all 250ms ease;}
        .u-btn-hollow:before{top:-1px;left:-1px;bottom:100%;right:100%;border-top:1px solid transparent;border-left:1px solid transparent;}
        .u-btn-hollow:after{bottom:-1px;right:-1px;top:100%;left:100%;border-bottom:1px solid transparent;border-right:1px solid transparent;}
        .u-btn-hollow:hover:before{bottom:-1px;right:-1px;}
        .u-btn-hollow:hover:after{top:-1px;left:-1px;}
        .u-btn-hollow-grey1{color:#333;border-color:#ccc;}
        .u-btn-hollow-grey1:hover{color:#238efa;}
        .u-btn-hollow-grey1:hover:before{border-top-color:#238efa;border-left-color:#238efa;}
        .u-btn-hollow-grey1:hover:after{border-bottom-color:#238efa;border-right-color:#238efa;}
        .u-btn-hollow-s{height:34px;line-height:32px;padding:0 20px;}
    </style>

<a class="u-vm u-btn u-btn-hollow u-btn-hollow-grey1 u-btn-hollow-s" href="">按钮效果</a>