不错的css按钮移过效果

来源：互联网发布：linux 数据库编辑：程序博客网时间：2024/06/06 00:00

   <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>

0 0