.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-1);
  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
}