JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<span class="read-more"><span>Meer informatie</span></span>

<br><br><br><br><br>

<a class="read-more">Meer informatie</span>

SCSS

body {
  padding: 40px; 
}

* {
  box-sizing: border-box;
  &:before, &:after {  
    box-sizing: border-box;
  }
}

$button-bg: #1787FB;
$button-h: 50px;
$icon-size: 20px;

.read-more {
  position: relative;  
  color: $button-bg;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 15px 30px 15px 45px;
  border-radius: 50px;
  height: $button-h;
  z-index:1;
  
  > span {
    position: relative;
    z-index: 2;
  }

  &:before, &:after {  
    content: '';
    position: absolute;  
    background: $button-bg;
    width: $icon-size;
    height: $icon-size;
    left: 12px;
    top: 12px;
    border-radius: $button-h;

  }

  &:before {  
    z-index: -1;
    transition: 
      top 300ms ease,
      left 300ms ease,
      width 200ms ease,
      height 300ms ease;

  }

  &:after {
    z-index: 1;
    transition: all 300ms ease;
    transform: rotate(0deg);
    content: '\f067';
    font-family: FontAwesome;
    color: #fff;
    padding: 5px;
  }



  &:hover {
    color: #fff;

    &:after {
      transform: rotate(180deg);
    }
    &:before {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

}