/* 一些齐齐怪怪的小特效 */

/* button */
.kele-btn-con{
  position: relative;
  display: inline-block;
  padding: 4px;
}
.kele-btn-con span{
  position: absolute;
  width: 0;
  height: 0;
  background-color: #008baf;
  transition: all .3s;
}

.kele-btn-con .left,
.kele-btn-con .top{
  top: 0;
  left: 0;
}

.kele-btn-con .right,
.kele-btn-con .bottom{
  bottom: 0;
  right: 0;
}
.kele-btn-con .left,
.kele-btn-con .right{
  height: 0;
  width: 1px;
}
.kele-btn-con .top,
.kele-btn-con .bottom{
  height: 1px;
  width: 0px;
}
.kele-btn-con:hover .left,
.kele-btn-con:hover .right{
  height: 100%;
  background-color: #ff840c;
}
.kele-btn-con:hover .top,
.kele-btn-con:hover .bottom{
  width: 100%;
  background-color: #ff840c;
}
.kele-btn-con a{
  display: inline-block;
  padding: 0px 6px;
  color: #fff;
  background-color: #008baf;
  transition: all .5s;
  border-radius: 4px;
  font-size: 18px;
}
.kele-btn-con a:hover{
  background-color: #ff840c;
}