.formButton {
  width: 280px;
  height: 50px;
  border-radius: 20px;
  box-shadow: 1px 9px 15px 0px rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0.1em;
  transition: all 0.5s ease 0s;
}

.multiColorButton {
  color: rgba(251, 251, 251, 1);
  background-image: none;
  background: linear-gradient(96.76deg, #ffc727 -16.42%, #9e40ba 97.04%, #7000ff 150.71%);
  transition: all 1s ease 0s;
}

.multiColorButton:hover,
.multiColorButton:focus {
  transform: scale(1.05);
  background-image: linear-gradient(to right, #7000ff 0%, #9e40ba 31%, #ffc727 100%);
  background-size: 200%;
  background-position: right center;
}

.multiColorButton:active {
  transform: scale(1.08);
  font-size: 19px;
}

.whiteButton {
  color: #623f8b;
  background: #fcfcfc;
}

.whiteButton:hover,
.whiteButton:focus {
  transform: scale(1.05);
  background-image: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(98, 63, 139) 31%, rgb(255, 255, 255) 100%);
  background-size: 200%;
  background-position: right center;
  transition: all 1s ease 0s;
}

.whiteButton:active {
  transform: scale(1.08);
  font-size: 19px;
}

@media screen and (min-width: 768px) {
  .formButton {
    width: 300px;
  }
}
