这是本人自己写的比较常见的3种按钮特效

*html

<div class="box">
<a class="buttom">按钮1</a>
<br /><br />
<a class="buttom_2">按钮2</a>
<br /><br />
<a class="buttom_3">按钮2</a>
</div>

*css

.box{width:100px;margin:0 auto ;text-align: center;}
.buttom{position: relative;display: inline-block;}
.buttom:after{top:100%;left: 50%;right: 50%;border-bottom: 2px solid red;transition: 1s;content: "";position:absolute;}
.buttom:hover:after{left: 0;right: 0;}

.buttom_2{position: relative;display: inline-block;}
.buttom_2:after{top:100%;left: 0;right: 100%;border-bottom: 2px solid red;transition: 1s;content: "";position:absolute;}
.buttom_2:hover:after{right: 0;}

.buttom_3{position: relative;display: inline-block;transition:1s ;}
.buttom_3:before{content: "";position:absolute;background-color:red;left: 0;right:100%;transition:1s ;height: 18px;z-index: -1;}
.buttom_3:hover{color: #fff;}
.buttom_3:hover:before{right: 0;}