Text slide button - 0

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
    <a href="#" class="text-slide-btn" data-text="Hello world">
        Hello world       
      </a>
  </div>
</div>

<div class="align grey">
  <div class="align-bis">
    <a href="#" class="text-slide-btn to-down" data-text="Hello world">
        Hello world
        
      </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);
    }
  }
}

.text-slide-btn {
  $this: &;
  position: relative;
  text-decoration: none;
  font-size: 30px;
  font-weight: 600;
  &:before {
    position: absolute;
    color: orange;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-text);
    transition: all 0.2s ease;
  }
  &:hover,
  &:focus {
    &:before {
      width: 100%;
    }
  }
  &.to-down{
    &:before{
      height:0;
      width: 100%;
    }
    &:hover, &:focus{
      &:before{
        height: 100%;
      }
    }
  }
  
  &.to-left {
    &:before {
      text-align:right;
      right: 0;
      left: auto;
    }
  }
}