Back to Top

<div class="back-to-top">
  <a class="js-scroll" href="#back-to-top">
    <i class="fas fa-angle-double-up"></i>
  </a>
</div>

.back-to-top {
  position: absolute;
  bottom: -4.1rem;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  transition: background-color 360ms ease, box-shadow 360ms ease;
  width: 4.8rem;
  height: 4.8rem;
  background: #000000;
  box-shadow: 0 0 2.4rem rgba(255, 255, 255, 0.5);
  color: #ffffff;
  cursor: pointer;
  z-index: 10;
  display: inline-block;
}

.back-to-top:hover, .back-to-top:focus {
  background: #212121;
  box-shadow: 0 0 2.4rem rgba(0, 0, 0, 0.3);
}

.back-to-top i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(-45deg) translate(-50%, -50%);
  transform-origin: top left;
  cursor: pointer;
}

.back-to-top a {
  width: 100%;
  height: 100%;
  color: inherit;
  display: block;
}

.back-to-top {
  position: absolute;
  bottom: -4.1rem;
  left: 50%;
  transform: rotate(45deg) translateX(-50%);
  transition: background-color 360ms ease, box-shadow 360ms ease;
  width: 4.8rem;
  height: 4.8rem;
  background: #000000;
  box-shadow: 0 0 2.4rem rgba(255,255,255,.5);
  color: #ffffff;  
  cursor: pointer;
  z-index: 10;
  display: inline-block;

  &:hover,
  &:focus {
    background: #212121;
    box-shadow: 0 0 2.4rem rgba(0, 0, 0, 0.3);
  }

  i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg) translate(-50%, -50%);
    transform-origin: top left;
    cursor: pointer;
  }

  a {
    width: 100%;
    height: 100%;
    color: inherit;
    display: block;
  }
}