.c-arrow-button {
  position: relative;
  width: rem(60px);
  height: rem(60px);
  background-color: $white;
  border-radius: 50%;
  cursor: pointer;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: rem(46px);
    height: rem(46px);
    background-color: $green-gfw;
    border-radius: 50%;
  }

  &:hover:before {
    background-color: darken($green-gfw, 10%);
  }

  .icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: rem(16px);
    height: rem(16px);
    fill: $white;
  }

  &.-up .icon {
    top: 0;
    transform: rotateZ(180deg);
  }

  &.-down .icon {
    top: rem(3px);
  }

  &.-left .icon {
    top: 0;
    left: rem(-4px);
    transform: rotateZ(90deg);
  }

  &.-right .icon {
    top: 0;
    left: rem(2px);
    transform: rotateZ(-90deg);
  }
}

.c-arrow-button {
  position: relative;
  width: rem(60px);
  height: rem(60px);
  border-radius: 50%;
  cursor: pointer;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: rem(46px);
    height: rem(46px);
    background-color: $green-gfw;
    border-radius: 50%;
  }

  &:hover:before {
    background-color: darken($green-gfw, 10%);
  }

  .icon {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: rem(16px);
    height: rem(16px);
    fill: $white;
  }

  &.-up .icon {
    top: 0;
    transform: rotateZ(180deg);
  }

  &.-down .icon {
    top: rem(3px);
  }

  &.-left .icon {
    top: 0;
    left: rem(-4px);
    transform: rotateZ(90deg);
  }

  &.-right .icon {
    top: 0;
    left: rem(2px);
    transform: rotateZ(-90deg);
  }
}

Remove the arrow button border
Remove the arrow button border
