基于Less封装的按钮动画

今天没什么事情，基于less做了个按钮动画。直接上代码吧！

.colorBtn(@color) {
    background: @color;
    &:hover {
        color: @color;
        &:before,
        &:after {
            background: @color;
        }
    }
}
.li-btn {
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  outline: none;
  margin-right: 25px;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;
  &:hover {
    background: #fff;
    &:before, &:after {
      width: 100%;
      transition: 600ms ease all;
    }
  }
  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }
  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}

.pink-btn{
  .colorBtn(#E65D6E);
 }
.blue-btn{
  .colorBtn(#324157);
 }

 .light-blue-btn{
  .colorBtn(#3A71A8);
  
 }
 .red-btn {
    .colorBtn(#C03639)
}

.yellow-btn {
  .colorBtn(#FEC171)
}
.green-btn{
  .colorBtn(#30B08F);
 }
//使用的话 直接引入Less文件
@import '../../public/less/btn.less';
//页面上这样写
<router-link class="li-btn blue-btn" to="/components/index">合同信息查询</router-link>
<router-link class="li-btn light-blue-btn" to="/charts/index">添加订单</router-link>
<router-link class="li-btn pink-btn" to="/excel/download">采购单查询</router-link>
<router-link class="li-btn green-btn" to="/example/table/table">部件信息查询</router-link>

gif.gif