<div class="button">hover me to change</div>

 .button{

    width:200px;

    height:60px;

    position: relative;

    background: #fff;

    margin:30px auto;

    box-sizing: border-box;

    cursor: pointer;

    text-align: center;

    line-height: 60px;

    &::before{

      content:'';

      width:;

      height:;

      background:  #00adb5;

      position: absolute;

      top:-1px;right:-1px;

      z-index: -1;

      transition: width .5s,height .5s;

    }

    &::after{

      content:'';

      width:;

      height:;

      background:  #00adb5;

      position: absolute;

      bottom:-1px;left:-1px;

      z-index: -1;

      transition: width .5s,height .5s;

    }

    &:hover::before{

      width:calc(100% + 2px);

      height:calc(100% + 2px);

    }

    &:hover::after{

      width:calc(100% + 2px);

      height:calc(100% + 2px);

    }

  }