<div>
  <button class="arrow"><span class="visually-hidden">Read More</span></button>
  <button class="arrow -long"><span class="visually-hidden">Read More</span></button>
</div>

<div>
  <button class="arrow -large -purple"><span class="visually-hidden">Read More</span></button>
  <button class="arrow -long -large -purple"><span class="visually-hidden">Read More</span></button>
</div>

<div>
  <button class="arrow -huge -red"><span class="visually-hidden">Read More</span></button>
  <button class="arrow -long -huge -red"><span class="visually-hidden">Read More</span></button>
</div>

$dark: #493D3F;
$purple: #8177D5;
$red: #E67573;

@mixin arrow($color) {
  width: 12px;
  height: 12px;
  border: none;
  background: none;
  position: relative;
  display: inline-block;
  // Scales well with transform too!
  // transform: scale(2.5);
  &::before {
    top: 2px;
    right: 6px;
    width: 8px;
    height: 8px;
    content: '';
    position: absolute;
    transform: rotate(-45deg);
    box-shadow: 2px 2px 0 $color, 3px 2px 0 $color, 2px 3px 0 $color, 3px 3px 0 $color;
  }
  &::after {
    width: 0;
    height: 0;
    left: -1px;
    bottom: 50%;
    content: '•';
    color: $color;
    line-height: 0;
    font-size: 14px;
    position: absolute;
    transition: left .1s ease-out, bottom .1s ease-out, letter-spacing .1s ease-out;
  }
  
  &.-long {
    width: 22px;
    &::after {
      left: 0;
      content: '•••';
      text-align: right;
    }
  }
  
  &:hover,
  &:focus {
    outline: none;
    &::after {
      left: 1px;
    }
    &.-long::after {
      left: -.19em;
      letter-spacing: .1em;
    }
  }
}

.arrow {
  @include arrow($dark)
}

// Just for the demo
body {
  padding: 25px;
  text-align: center;
  background: #FFCA96;
}

div {
  width: 200px;
  padding: 25px;
  display: flex;
  margin: 0 auto 25px;
  justify-content: space-between;
  &:first-of-type {
    margin-bottom: 0;
  }
}

.arrow {
  &.-large {
    transform: scale(2.5);
  }
  &.-huge {
    transform: scale(5);
  }
  &.-purple {
    @include arrow($purple);
  }
  &.-red {
    @include arrow($red);
  }
}


// Hiding the text inside the buttons
// You might not want to, or maybe they are 
.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding:0 !important;
    border:0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
} 
body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }