JSFiddle - React, Tailwind, and code Playground

by Bouteille Dimitri

HTML

<div id="presentation">
  <p>
    <a href="/" class="btn-arrow to-left">
      <span>To left</span>
    </a>
  </p>
  <p>
    <a href="/" class="btn-arrow">
      <span>To right</span>
    </a>
  </p>
</div>

SCSS

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

$_font-color: rgb(200,200,200);
$_font-color-secondary : #E91E63;
$_font-family : 'Roboto', sans-serif;
$_border-width : 3px;
$_border-arrow-width : 16px;

#presentation{
  background: rgb(245,245,245);
  display: flex;
  align-item: center;
  padding: 180px 0;
  p{
    flex: 1;
    text-align:center;
  }
}


.btn-arrow{
  position: relative;
  font-family: $_font-family;
  &:before, &:after{
    content:"";
    left: 100%;
    margin-left : -#{$_border-arrow-width};
    width: $_border-arrow-width;
    height: 3px;
    position: absolute;
    transform-origin: right;
    transition: all 0.2s ease;
  }
  &:before{
    top: calc(50% - #{($_border-width / 2)});
  }
  &:after{
    bottom: calc(50% - #{($_border-width / 2)});
  }
  &:hover, &:focus{
    span{
      color: $_font-color-secondary;
      &:after{
       background: $_font-color-secondary;
      }
    }
    &:before,&:after{
      margin-left: 26px;
      
    height:$border-width - 1px;
    }
    &:after{
      transform: rotate(-45deg);
    }
    &:before{
      transform: rotate(45deg);
    }
  }
  span{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 1px;
    display:inline-block;
    transition: all 0.2s ease-out;
    color: rgb(200,200,200);
    color: $_font-color;
    z-index: 30;
    &:after{ 
      transition: all 0.3s ease;
      z-index: 29;
      background: $_font-color;
      content: "";
      left:0;
      right:0;
      position: absolute;
      top: calc(50% - #{($_border-width / 2)});
      bottom: calc(50% - #{($_border-width / 2)});
    }
  }
}