Text slide button

by Bouteille Dimitri

HTML

<div class="align black">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn" data-text="/tvp-world">
     <span class="text-change-btn-label">Instagram</span>
  </a>  
  </div>
  </div>
  
  <div class="align black-l">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn top" data-text="/tvp-world">
     <span class="text-change-btn-label">Instagram</span>
  </a>  
  </div>
  </div>
    
  <div class="align black">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn to-bottom" data-text="Hello world">
     <span class="text-change-btn-label">Hover me</span>
  </a>  
  </div> 
  
  </div>
  
    <div class="align black-l">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn to-bottom top" data-text="Hello world">
     <span class="text-change-btn-label">Hover me</span>
  </a>  
  </div> 
  
  </div>
  
      <div class="align black">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn to-top" data-text="Hello world">
     <span class="text-change-btn-label">Hover me</span>
  </a>  
  </div>  
  </div>
    <div class="align black-l">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn to-top bottom" data-text="Hello world">
     <span class="text-change-btn-label">Hover me</span>
  </a>  
  </div>  
  </div>
  
  <div class="align black black">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn radius" data-text="Hello world">
     <span class="text-change-btn-label">Hover me</span>
  </a>  
  </div>
  
  </div>
  
  <div class="align black-l">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn background" data-text="/tvp-world">
     <span class="text-change-btn-label">instagram</span>
  </a>  
  </div>
  
  </div>
  
   <div class="align black">
  <div class="align-bis">
  
  <a href="#" class="text-change-btn background with-icon" data-text="&#xE8B8;">
     <span class="text-change-btn-label">Delete</span>
  </a>  
  
  </div>
  
  </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-change-btn {
  
  $this : &;
  $label : &-label;
  
  position:relative;
  display: inline-block;
  border: solid 1px $white;
  text-decoration: none;
  line-height: 40px;
  overflow: hidden;
  box-sizing:border-box;
  
    text-transform: uppercase;
  &-label{
    color: $grey;
    display: block;
    padding: 0 30px;   
    transition: all $transition-duration ease-in;
  }
  &:hover, &:focus{
    #{$this}-label {
      transform: translateX(100%);
    }
    &:before{
      transform: none!important;
    }
  }
  &.to-bottom{
    &:hover, &:focus{
          #{$this}-label {
      transform: translateY(100%);
    }
    }
  }
  &.to-top{
    &:hover, &:focus{
          #{$this}-label {
      transform: translateY(-100%);
    }
    }
  }
  &.top{
    &:before{
      transform: translateY(-100%);
    }
  }
  
    &.bottom{
    &:before{
      transform: translateY(100%);
    }
  }
  
  
  &:before{
    content:attr(data-text);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
     transform: translateX(-100%);
     text-align:center;
    color: $white;
    transition: all $transition-duration ease-out;
    white-space: nowrap;
  ...