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>

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: 30px;
    font-weight: 20px;
    font-weight: 500;
    position:relative;
    z-index: 5;
    
  }
  
  &:after{
    position:absolute;
    background-color:$primary;
    left:0;
    right:0;
    height: 5px;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    transition: top 0.2s ease 0.2s, transform 0.2s ease, height 0.2s ease 0.2s;
  }
  
  &:hover, &:focus{
    &:after{
      top:0;
      transform: none;
      height: 100%;
       transition: top 0.2s ease, transform 0.2s ease, height 0.2s ease 0.2s;
    
    }
  }
  
}