.hr-btn {
  padding: 11.5px 30px 10.5px 30px;
  font-size: 13px;
  font-weight: var(--weight-600);
  font-weight: 600;
  text-transform: uppercase;
  transition: all 900ms ease;
  z-index: 1;
  position: relative;
  display: inline-block;
}
.btn-main {
  color:var(--white);
  background-color:#000
}
.btn-main:after {
  content:"";
  position:absolute;
  bottom:-3px;
  left:-3px;
  width:20px;
  height:20px;
  background-color:var(--white);
  border-radius:0 50px 0 0;
  transition:ease all 0.2s;
  z-index:-1;
  opacity:0;
  visibility:hidden;
  transition:all ease 0.7s
}
.btn-main:hover {
  color:#000
}
.btn-main:hover::after {
  opacity:1;
  visibility:visible;
  width:100%;
  height:100%;
  border-radius:0
}
.hr-btn1 {
  padding:11px 30px 10px 30px;
  font-size:15px;
  font-weight:var(--weight-600);
  font-weight:600;
  text-transform:uppercase;
  border:2px solid #fff;
  transition:all 900ms ease;
  z-index:1
}
.btn-main-2 {
  color:var(--white);
  background-color:#fff0
}
.btn-main-2:hover {
  color:var(--white);
  background-color:var(--color-7);
  border-color:var(--color-7)
}