<span class="arrowbtn arrowbtn-up"></span>
<span class="arrowbtn arrowbtn-down"></span>

// Button settings
$btn-size:                100px;
$btn-arrowsize:           $btn-size / 4;

// Button colors
$btn-color:               hotpink;
$btn-bg:                  #111;
$btn-border:              hotpink;

// Button hover colors
$btn-hover-color:         #111;
$btn-bg-hover:            white;
$btn-hover-border-color:  white;

body {
  background: #111;
}

.arrowbtn {
  position: absolute;
  width: $btn-size;
  height: $btn-size;
  background: $btn-bg;
  border: 2px solid $btn-border;
  border-radius: $btn-size;
  color: $btn-color;
  cursor: pointer;
  left: 50%;
  line-height: $btn-size;
  margin-left: -($btn-size / 2);
  transition: all 0.25s ease-in-out;
  &:hover {
    background: $btn-bg-hover;
    border-color: $btn-hover-border-color;
    color: $btn-hover-color;
  }
  &:after {
    position: absolute;
    display: inline-block;
    content: "";
    width: $btn-arrowsize;
    height: $btn-arrowsize;
    top: 50%;
    left: 50%;
  }
}

.arrowbtn-up {
  top: 20px;
  &:after {
    margin-left: -($btn-arrowsize * .5);
    margin-top: -($btn-arrowsize * .25);
    border-top: 2px solid;
    border-left: 2px solid;
    transform: rotateZ(45deg);
  }
}

.arrowbtn-down {
  bottom: 20px;
  &:after {
    margin-left: -($btn-arrowsize * .5);
    margin-top: -($btn-arrowsize * .75);
    border-bottom: 2px solid;
    border-right: 2px solid;
    transform: rotateZ(45deg);
  }
}