.hr-btn {
  transform:perspective(1px) translateZ(0);
  transition-duration:0.3s;
  background:var(--color-2) none repeat scroll 0 0;
  box-shadow:0 0 1px #fff0;
  transform:perspective(1px) translateZ(0);
  transition-duration:0.5s;
  border-radius:5px;
  color:#fff;
  cursor:pointer;
  display:block;
  font-size:16px;
  font-weight:700;
  height:48px;
  line-height:48px;
  overflow:hidden;
  padding:0 24px;
  position:relative;
  display:inline-block;
  text-transform:capitalize;
  z-index:2
}
.hr-btn::before {
  background: var(--color-2);
  border-radius: 25%;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(2);
  transform-origin: 50% 50% 0;
  transition-duration: 0.5s;
  transition-property: transform;
  transition-timing-function: ease-out;
  z-index: -1;
}
.hr-btn:hover {
  color:#fff;
  box-shadow:0 20px 38px rgb(0 0 0 / .16);
  -webkit-transform:translateY(-3px);
  -moz-transform:translateY(-3px);
  -ms-transform:translateY(-3px);
  -o-transform:translateY(-3px);
  transform:translateY(-3px)
}
.hr-btn:hover::before,
.hr-btn:focus::before,
.hr-btn:active::before {
  transform:scale(0)
}
.hr-btn.btn__white {
  color:#666
}
.hr-btn.btn__white::before {
  background:#fff none repeat scroll 0 0
}
.hr-btn.btn__white:hover {
  color:#fff
}