css3 返回按钮,css3按钮特效

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

*html

按钮1

按钮2

按钮2

*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;}