Button slider - V5

Button slider - V5

by Bouteille Dimitri

HTML

<section>
  <p>
    <a href="#" class="btn">
    <span>Hello world</span>
    </a>
  </p>
</section>

<section>
  <p>
    <a href="#" class="btn-v2">
    <span>Hello world</span>
    </a>
  </p>
</section>

<section>
  <p>
    <a href="#" class="btn-v3">
    <span>Hello world</span>
    </a>
  </p>
</section>

<section>
  <p>
    <a href="#" class="btn-v4">
    <span>Hello world</span>
    </a>
  </p>
</section>

<section>
  <p>
    <a href="#" class="btn-v5">
    <span>Send your message</span>
    </a>
  </p>
</section>

SCSS

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900'); 

$color: #263238;
$border-width: 4px;

body {
  font-family: 'Raleway', sans-serif;
}

a {
  text-decoration: none;
  outline: none;
  color: $color; 
 } 
 
 section{
   text-align:center;
   padding: 60px 0;
 }


// BTN
.btn {
  display: inline-block;
  border: solid 4px $color;
  padding: 12px 20px;
  position: relative;
  overflow: hidden; 
  span {
    text-transform: uppercase;
    font-weight: 900;
    z-index: 5;
    font-size: 18px;
    position: relative;
    transition: all 0.3s 0.1s ease;
    letter-spacing: 1; 
  }
  &:before, &:after {
    content: "";
    position: absolute;
    width: 170%;
    padding-top: 150%;
    background: $color;
    transition: all 0.5s ease-out;
    transform: rotate(45deg); 
  }
  &:before {
    top: 0;
    left: -150%; 
  }
  &:after {
    bottom: 0;
    right: -150%; 
  }
  &:hover span, &:focus span {
    color: whitesmoke; 
  }
  &:hover:before, &:focus:before {
    left: 0; 
  }
  &:hover:after, &:focus:after {
    right: 0; 
  }
}


// BTN-V2
.btn-v2{
  display: inline-block;
  //padding: 12px 20px;
  position: relative;
  overflow: hidden; 
  &:hover{
    &:before{
      top:0;
    }
    &:after{
      right:0;
    }
    & span{
      padding-left: 25px;
      padding-right:25px;
      &:before{
        top:0;
      }
    }
  }
  &:before{
    left:0;
    background: $color;
    width: $border-width;
    bottom:0;
    top:100%;
    content:"";
    transition: all 0.15s ease 0.1s;
    position:absolute;
  }
  &:after{
    top:0;
    left:0;
    right:100%;
    height: $border-width;
    background: $color;
    position: absolute;
    content:"";
    transition: all 0.15s ease 0.25s;
  }
 span{
   text-transform: uppercase;   
    padding: 16px 0;
    font-weight: 900;
    font-size: 18px;
    transition: all 0.1s ease;
    letter-spacing: 1; 
    display:inline-block;
    //position:relative;
    &:before{
      right:0;
   ...