body {
  height: 50vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(218, 216, 216);
}

input {
  display: none;
}

.star-button {
  position: relative;
  width: 250px;
  height: 85px;
  margin-top: 70px;
  border-radius: 15px;
  cursor: pointer;
  background: rgb(255, 255, 255);
  z-index: 2;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.096);
}

.heart {
  position: absolute;
  left: 15%;
  top: 55%;
  font-size: 45px;
  transform: translateY(-50%);
  color: rgb(196, 196, 196);
  z-index: 1;
}

.btn-text {
  position: absolute;
  left: 50%;
  width: 130px;
  height: 100%;
  background: rgb(228, 51, 66);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  overflow-x: hidden;
}

.btn-text span,
.btn-text1 span {
  color: rgb(255, 255, 255);
  transform: translateX(55%);
  font-size: 35px;
  padding: 20px;
  font-family: "sans-serif";
  transition: 0.2s;
  user-select: none;
}

.active-heart {
  position: absolute;
  right: 15%;
  top: 20%;
  font-size: 50px;
  z-index: -1;
  color: rgb(219, 219, 219);
}

input:checked + .heart {
  animation: move 0.7s ease-in forwards;
  color: rgb(228, 51, 66);
}

input:checked ~ .active-heart {
  color: rgb(228, 51, 66);
  transition-delay: 0.7s;
  animation: shake 0.8s 0.2s forwards;
  animation-delay: 0.7s;
}

input:checked ~ .btn-text span {
  transform: translateX(-45%);
  transition-delay: 0.7s;
}

input:checked ~ .btn-text {
  left: 0;
}

@keyframes move {
  10% {
    transform: translateX(-330%) scale(1.2);
    left: 20%;
    opacity: 1;
  }
  30% {
    transform: translateY(150%);
  }
  50% {
    transform: translateX(300%);
    opacity: 1;
  }
  75% {
    transform: translateY(200%);
    left: 65%;
    opacity: 1;
  }
  85% {
    left: 70%;
  }
  100% {
    transform: translateY(-600%);
    left: 70%;
    opacity: 0;
  }
}
@keyframes shake {
  0% {
    transform: scale3d(1, 1, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
    text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
    text-shadow: 0 0 2px #ff0000, 0 0 5px #0000ffb7;
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
    text-shadow: 0 0 1px #ff0000, 0 0 5px #0000ff83;
  }
  100% {
    transform: scale3d(1, 1, 1);
    text-shadow: 0 0 1px rgb(153, 151, 151), 0 0 5px rgb(174, 174, 179);
  }
}