.magic-btn {
  width: 13vw;
  padding: 0.6vw 2vw;
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  border-radius: 2vw;
  box-shadow: 0 0 0.75vw rgba(0, 0, 0, 0.25);
  transform: scale(0.9);

  &:hover {
    .wave {
      top: -9vw;
    }
  }

  span {
    position: relative;
    z-index: 1;
    color: white;
    font-size: 1.1vw;
    font-weight: 500;
    font-family: IRANSans, sans-serif;
  }

  .wave {
    width: 13.5vw;
    height: 13.5vw;
    background-color: var(--blue2);
    box-shadow: inset 0 0 3.7vw rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: -5.1vw;
    transition: 0.4s;

    &::before, &::after {
      width: 200%;
      height: 200%;
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%,-75%);
    }

    &::before {
      border-radius: 45%;
      background-color: rgba(7, 82, 136, 0.5);
      animation: wave 5s linear infinite;
    }

    &::after {
      border-radius: 40%;
      background-color: rgba(4, 91, 154, 0.5);
      animation: wave 10s linear infinite;
    }
  }
}

@keyframes wave {
  0% {
    transform: translate(-50%,-75%) rotate(0deg);
  }

  100% {
    transform: translate(-50%,-75%) rotate(360deg);
  }
}

@media screen and (max-width: 450px) {
  .magic-btn {
    transform: scale(1.5);
  }
}