.button__click {
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  transition: box-shadow 400ms;
  padding: 0.7em 1.7em;
  font-size: 1rem;
  border-radius: 20px;
  color: rgb(0, 0, 0, 0.75);
  background: transparent;
  transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
}

.button__click:hover {
  animation: button__click__animation 5.5s infinite both;
}

.button__click__background {
  transition: transform 1.5s;
  z-index: -2;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  animation: button__click__background 10s infinite;
  background-color: #99fff8;
  background-image: radial-gradient(at 89% 76%, hsla(13,63%,73%,1) 0px, transparent 50%),
  radial-gradient(at 69% 38%, hsla(217,85%,71%,1) 0px, transparent 50%),
  radial-gradient(at 12% 8%, hsla(214,70%,64%,1) 0px, transparent 50%),
  radial-gradient(at 53% 10%, hsla(339,64%,65%,1) 0px, transparent 50%),
  radial-gradient(at 5% 67%, hsla(212,74%,70%,1) 0px, transparent 50%);
}

.button__click::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.295);
}

.button__click:focus {
  box-shadow: 0px 0px 0px 2px #000;
}

@keyframes button__click__animation {
  0%, 100% {
    transform: scale(1.1) perspective(500px) rotateX(15deg) rotateY(-10deg);
  }

  50% {
    transform: scale(0.9) perspective(500px) rotateX(-15deg) rotateY(15deg);
  }
}

@keyframes button__click__background {
  0%, 100% {
    transform: translateX(0%);
  }

  25% {
    transform: translateX(-50%);
  }

  50% {
    transform: translateX(-50%) translateY(-50%);
  }

  75% {
    transform: translateX(0%) translateY(-50%);
  }
}