Button slider - V2

Button slider - V2

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>

SCSS

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

$color: #263238;

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

a {
  text-decoration: none;
  outline: none;
  color: $color; 
 } 
 
 section{
   text-align:center;
   margin-top: 100px;
 }

// 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;
  background:red;
  padding: 12px 20px;
  position: relative;
  overflow: hidden; 
 span{
   text-transform: uppercase;   
    //padding: 12px 20px;
    font-weight: 900;
    font-size: 18px;
    transition: all 0.3s 0.1s ease;
    letter-spacing: 1; 
    display:inline-block;
    position:relative;
    &:after{
      border-bottom: solid 4px $color;
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      
      display:block;
    }
 }
}