<h1>Sign-post arrow buttons</h1>

<p><button class="btn-right"><a href="#">Right</a></button></p>

<p><button class="btn-left"><a href="#">Left</a></button></p>

<p><button class="btn-up"><a href="#">Up</a></button> <button class="btn-down"><a href="#">Down</a></button></p>

/* The button-maker */
@mixin arrow-button($color, $background, $shadow, $font-size, $width, $height, $direction) {  
  background: none;
  border: 0;
  font-size: $font-size;
  line-height: $height;
  position: relative;
  width: $width;
  height: $height;
  
  @if $direction == "up" {
    transform: rotate(-90deg);
  }  @else if $direction == "down" {
    transform: rotate(90deg);
  }
  
  a {
    color: $color;
    text-decoration: none;
    position: relative;
    z-index: 10;
  }
  
  &::before,
  &::after {
    background: $background;
    border-radius: 2px;
    content: '';
    display: block;
    position: absolute;
      left: 0;
      right: 0;
    transition: all 1s;
    height: $height/2;
  }
  

  &::before { 
    box-shadow: 
      -1px 1px 0 $shadow,
      -2px 2px 0 $shadow,
      -3px 3px 0 $shadow,
      -4px 4px 0 $shadow;
    transform: skew(45deg);
    @if $direction == "left" { bottom: 0; z-index: 1 }
    @else { top: 0; }
  }

  &::after {
    box-shadow: 1px 1px 0 $shadow, 
      2px 2px 0 $shadow,
      3px 3px 0 $shadow, 
      4px 4px 0 $shadow;
    transform: skew(-45deg);
    @if $direction == "left" { top: 0;}
    @else { bottom: 0; }
  }
  
  &:hover::before,
  &:hover::after {
    background: lighten($background,15%);
  }
  
  &:focus {
      &::before,
      &::after {
        background: lighten($background,15%);
      }
      outline: 0;
  }
}

/* How to include it */
.btn-right {
  @include arrow-button(#fff, #29c0d5, #1897c0, 22px, 8em, 2em, right);
  
  &:hover {
    //animation: zoom 2s;
  }
}

.btn-left {
  @include arrow-button(#fff, #e4135d, #c81163, 22px, 8em, 2em, left);
  
  &:hover {
    //animation: spin 1.5s linear;
  }
}

.btn-up {
  @include arrow-button(#fff, #e4135d, #c81163, 22px, 4em, 3em, up);
}

.btn-down {
  @include arrow-button(#fff, #29c0d5, #1897c0, 22px, 6em, 4em, down);
  margin-top: 3em;
}

@keyframes zoom {
  25% {
    transform: scale3d(1.5,1.5,0);
  }
  
  50% {
    transform: scale3d(1,1,0);
  }
  
  75% {
    transform: scale3d(1.25, 1.25, 0);
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
/* Page styling */

body {
  background: #fefefe;
  font-family: "Noto sans", sans-serif;
  text-align: center;
  margin: 3em 0;
}

h1 {
  color: #0b1421;
  font-weight: 400;
}

button a {
  top: -2px; // Better alignment for font
}