.btn-arrow {
  color: transparent;
  display: block;
  margin: 3rem;
  position: relative;
  width: 6rem;
  height: 6rem;
  background-color: rgba(0, 0, 0, 0.05);
  transition: all 150ms ease-out;
}
.btn-arrow::before, .btn-arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #606060;
  transition: all 150ms ease-out;
}
.btn-arrow::before {
  width: 75%;
  height: 25%;
}
.btn-arrow::after {
  width: 25%;
  height: 75%;
}
.btn-arrow:hover, .btn-arrow:focus {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-arrow:hover::before, .btn-arrow:hover::after, .btn-arrow:focus::before, .btn-arrow:focus::after {
  background-color: #404040;
}
.btn-arrow.btn-arrow-left::before, .btn-arrow.btn-arrow-left::after, .btn-arrow.btn-arrow-right::before, .btn-arrow.btn-arrow-right::after {
  top: 12.5%;
  left: 12.5%;
}
.btn-arrow.btn-arrow-left {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.btn-arrow.btn-arrow-right {
  -webkit-transform: rotate(135deg);
          transform: rotate(135deg);
}

/* ========================= */
html, body {
  height: 100%;
  width: 100%;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
}