Buttons slider

by Bouteille Dimitri

HTML

<section>
  <h3>
  .btn-slider
  </h3>
  <p>
    <a href="#" data-text="S'inscrire" class="btn-slider">
      S'inscrire
    </a>
  </p>
</section>

<section>
  <h3>
  .btn-slider.to-down
  </h3>
  <p>
    <a href="#" data-text="S'inscrire" class="btn-slider to-down">
      S'inscrire
    </a>
  </p>
</section>

<section>
  <h3>
  .btn-slider.reflief
  </h3>
  <p>
    <a href="#" data-text="S'inscrire" class="btn-slider spe reflief">
      S'inscrire
    </a>
  </p>
</section>

SCSS

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

body{
 font-family: 'Raleway', sans-serif;
 background: #fff;
}
a, p{
   color: rgb(8,8,8);
}
h3{
  color: rgb(200,200,200);
  font-size:15px;
  font-weight: 400;
  margin-top: 50px;
}

a{
  text-decoration:none;
  outline: none;
}

.btn-slider{
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 900;
  position:relative;
  &.to-down{
    &:before{
      width:auto;
      height:0;
    }
    &:hover, &:focus{
      &:before{
        height:100%;
      }
    }
  }
  &.spe{
    color: #FC5C7D;
    &:before{
      color: #DBD4B4;
    }
    &:after{
      color: #CC95C0;
    }
  }
  &.reflief{
    &:before{
      width:auto;
      overflow: visible;
      z-index:-1;
      top: 100%;
      margin:0;
    }
    /*&:after{
      z-index: -2;
      content: attr(data-text);
      position:absolute;
      margin-top: 8px;
      top:0;
      left:0;
      bottom:0;
      overflow:hidden;
      transition: all 0.3s ease-in;
    } */
    &:hover, &:focus{
      &:before{
        left:0;
        right:0;
        top:0;
        bottom:0;
      }
    }
  }
  &:before{
    content : attr(data-text);
    position:absolute;
    color: #d46384;
    top:0;
    left:0;
    bottom:0;
    width:0;
    overflow:hidden;
    transition: all 0.3s ease-in;
  }
  &:hover, &:focus{
    &:before{
      width:100%;
    }
  }
}