Line button

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">

    <a href="#" class="line-btn">
     <span class="line-btn-label">Hello world</span>
  </a>
  </div>
</div>

<div class="align grey">
  <div class="align-bis">

    <a href="#" class="line-btn to-top">
     <span class="line-btn-label">Hello world</span>
  </a>
  </div>
</div>

<div class="align">
  <div class="align-bis">

    <a href="#" class="line-btn direction">
     <span class="line-btn-label">Hello world</span>
  </a>
  </div>
</div>

<div class="align grey">
  <div class="align-bis">

    <a href="#" class="line-btn direction to-left">
     <span class="line-btn-label">Hello world</span>
  </a>
  </div>
</div>

SCSS

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@charset "UTF-8";
$primary: #03A9F4;
$grey: rgb(180,
180,
180);
$white: #fff;
$black: #333;
$borderColor: $black;
$borderWidth: 1px;
$borderTransition: 0.25s;
$borderBtnHeight: 42px;
$transition-duration: 0.3s;
//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: $black;
  font-size: 14px;
}

.align {
  display: flex; //background-color: rgb(250,250,250);
  &-bis {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 60px 0;
  }
  &.grey {
    background-color: rgb(245, 245, 245);
  }
  &.black {
    background-color: rgb(45, 45, 45);
    &-l {
      background-color: rgb(80, 80, 80);
    }
  }
}

.line-btn {
  $this: &;
  $label: #{$this}-label;
  text-decoration: none;
  position: relative;
  #{$label} {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 900;
    position: relative;
    z-index: 5;
    transition: color 0.2s ease 0s;
  }
  &:after {
    position: absolute;
    background-color: $black;
    left: 0;
    right: 0;
    height: 4px;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    transition: top 0.2s ease 0.2s, transform 0.2s ease 0.2s, height 0.2s ease 0s;
  }
  &:not(.direction):hover,
  &:not(.direction):focus {
    #{$label} {
      color: $white;
      transition-delay: 0.2s;
    }
    &:after {
      top: 0;
      transform: none;
      height: 100%;
      transition: top 0.2s ease, transform 0.2s ease, height 0.2s ease 0.2s;
    }
  }
  &.to-top {
    &:after {
      top: auto;
      bottom: 50%;
      transform: translateY(50%);
      transition: bottom 0.2s ease 0.2s, transform 0.2s ease 0.2s, height 0.2s ease 0s;
    }
    &:hover,
    &:focus {
      &:after {
        top: auto;
        bottom: 0;
        transform: none;
        transition: bottom 0.2s ease,...