<div class="wrapper wrapper-light">
  <div class="btn-border-dark">
    <div class="btn-border-dark-inner">
      <a href="#">Btn Border Dark</a>
    </div>
  </div>
</div>

<div class="wrapper wrapper-dark">
  <div class="btn-border-light">
    <div class="btn-border-light-inner">
      <a href="#">Btn Border Light</a>
    </div>
  </div>
</div>

// Border Hover Animation Button
$light-gray: #DAE9F4; // rgb(218,233,244)
$dark-gray: #9BAEC8; // rgb(155,174,200)
$blue: #0395E5; // rgb(3,149,229)

$btn-font : 'Open Sans', sans-serif;
$btn-font-size : 12px;
$btn-letter-spacing : 3px;
$btn-border-width  : 220px;
$btn-border-height : 50px;
$btn-border-stroke: 1px;
$btn-border-transition: 0.15s;
$btn-border-pipeline_width: $btn-border-width+$btn-border-stroke;
$btn-border-pipeline_height: $btn-border-height+$btn-border-stroke;
$btn-border-pipes: 4;

@function border-pipeline ($btn-border-transition, $pipe) {
  @return $btn-border-transition*$pipe;
}

@mixin border-animation($dimension, $easing ,$pipe )
{
  transition: $btn-border-transition  $dimension $easing border-pipeline($btn-border-transition,$pipe);
  -web-kit-transition: $btn-border-transition  $dimension $easing border-pipeline($btn-border-transition,$pipe);
}

html,
body {
  background: rgb(255,255,255);
  height: 100%;
  margin: 0;
}

.wrapper {
  height: 50%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;

  align-items: center;
  
  &-light { background: rgb(255,255,255); }
  &-dark { background: rgb(12,12,12); }
  
  .btn-border-dark,
  .btn-border-light {
    margin: auto;
    
    .btn-border-dark-inner,
    .btn-border-light-inner {
      
      
      a {
        text-decoration: none;
      }
    }
  }
  
  // Button Border Light
  .btn-border-light {
  position: relative;
  width: $btn-border-width;
  height: $btn-border-height;
  background: none;
  border: 1px solid $light-gray;
  text-align: center;
  cursor: pointer;
  transition: ($btn-border-transition*$btn-border-pipes)+$btn-border-transition ease;

  .btn-border-light-inner {
    height: $btn-border-height;

    a {
      color: $light-gray;
      font-family: $btn-font;
      text-transform: uppercase;
      letter-spacing: $btn-letter-spacing;
      font-size: $btn-font-size;
      line-height: $btn-border-height;
    }
  }

  &:before {
    position: absolute;
    width: 0;
    height: $btn-border-stroke;
    content: '';
    background: $blue;
    top: -$btn-border-stroke;
    left: -$btn-border-stroke*2;
    @include border-animation( width, ease, 3);
  }

  &:after {
    position: absolute;
    width: $btn-border-stroke;
    height: 0;
    content: '';
    background: $blue;
    top: -$btn-border-stroke;
    right: -$btn-border-stroke*2;
    @include border-animation( height, ease, 2);
  }

  &-inner:before {
    position: absolute;
    width: $btn-border-stroke;
    height: 0;
    content: '';
    background: $blue;
    bottom:-$btn-border-stroke*2;
    left: -$btn-border-stroke*2;
    @include border-animation( height, ease, 0);
  }

  &-inner:after{
    position: absolute;
    width: 0;
    height: $btn-border-stroke;
    content: '';
    background: $blue;
    bottom: -$btn-border-stroke*2;
    right: -$btn-border-stroke*2;
    @include border-animation( width, ease, 1);
  }

  &:hover{
    border-color: transparent;
    background: none;

    &:before {
      width: $btn-border-pipeline_width;
      @include border-animation( width, ease, 0);
    }

    &:after {
      height:$btn-border-pipeline_height;
      @include border-animation( height, ease, 1);
    }

    .btn-border-light-inner {
      a {
        color: $blue;
      }
    }

    .btn-border-light-inner:after {
      width: $btn-border-pipeline_width;
      @include border-animation( width, ease, 2);
    }

    .btn-border-light-inner:before {
      height:$btn-border-pipeline_height;
      @include border-animation( height, ease, 3);
    }
  }
}

  // Button Border Dark
  .btn-border-dark {
  position: relative;
  width: $btn-border-width;
  height: $btn-border-height;
  background: none;
  border: 1px solid $dark-gray;
  text-align: center;
  cursor: pointer;
  transition: ($btn-border-transition*$btn-border-pipes)+$btn-border-transition ease;

  .btn-border-dark-inner {
    height: $btn-border-height;

    a {
      color: $dark-gray;
      font-family: $btn-font;
      text-transform: uppercase;
      letter-spacing: $btn-letter-spacing;
      font-size: $btn-font-size;
      line-height: $btn-border-height;
    }
  }


  &:before {
    position: absolute;
    width: 0;
    height: $btn-border-stroke;
    content: '';
    background: $blue;
    top: -$btn-border-stroke;
    left: -$btn-border-stroke*2;
    @include border-animation( width, ease, 3);
  }

  &:after {
    position: absolute;
    width: $btn-border-stroke;
    height: 0;
    content: '';
    background: $blue;
    top: -$btn-border-stroke;
    right: -$btn-border-stroke*2;
    @include border-animation( height, ease, 2);
  }

  &-inner:before {
    position: absolute;
    width: $btn-border-stroke;
    height: 0;
    content: '';
    background: $blue;
    bottom:-$btn-border-stroke*2;
    left: -$btn-border-stroke*2;
    @include border-animation( height, ease, 0);
  }

  &-inner:after{
    position: absolute;
    width: 0;
    height: $btn-border-stroke;
    content: '';
    background: $blue;
    bottom: -$btn-border-stroke*2;
    right: -$btn-border-stroke*2;
    @include border-animation( width, ease, 1);
  }

  &:hover {
    border-color: transparent;
    background: none;

    &:before{
      width: $btn-border-pipeline_width;
      @include border-animation( width, ease, 0);
    }
    &:after {
      height:$btn-border-pipeline_height;
      @include border-animation( height, ease, 1);
    }
    .btn-border-dark-inner {
      a {
        color: $blue;
      }
    }
    .btn-border-dark-inner:after {
      width: $btn-border-pipeline_width;
      @include border-animation( width, ease, 2);
    }
    .btn-border-dark-inner:before {
      height:$btn-border-pipeline_height;
      @include border-animation( height, ease, 3);
    }
  }
}
}