.gradient-btn {
  border: none;
  outline: none;
  background-size: 200% auto;
  transition: 0.5s;
}
.gradient-btn:hover {
  background-position: right center;
}
.gradient-btn.pink-btn {
  background-image: linear-gradient(
    to right,
    @pink 0%,
    @gradientPink 51%,
    @pink 100%
  );
  box-shadow: 0px 2px 2px @pink;

  &:hover {
    box-shadow: 0px 4px 2px @gradientPink;
  }
}
.gradient-btn.blue-btn {
  background-image: linear-gradient(
    to right,
    @blue 0%,
    @gradientBlue 51%,
    @blue 100%
  );
  box-shadow: 0px 2px 2px @blue;

  &:hover {
    box-shadow: 0px 4px 2px @gradientBlue;
  }
}
.gradient-btn.red-btn {
  background-image: linear-gradient(
    to right,
    @red 0%,
    @gradientRed 51%,
    @red 100%
  );
  box-shadow: 0px 2px 2px @red;

  &:hover {
    box-shadow: 0px 4px 2px @gradientRed;
  }
}
.gradient-btn.green-btn {
  background-image: linear-gradient(
    to right,
    @green 0%,
    @gradientGreen 51%,
    @green 100%
  );
  box-shadow: 0px 2px 2px @green;

  &:hover {
    box-shadow: 0px 4px 2px @gradientGreen;
  }
}
.gradient-btn.yellow-btn {
  background-image: linear-gradient(
    to right,
    @yellow 0%,
    @gradientYellow 51%,
    @yellow 100%
  );
  box-shadow: 0px 2px 2px @boxShadowYellow;

  &:hover {
    box-shadow: 0px 4px 2px @gradientYellow;
  }
}
.gradient-btn.orange-btn {
  background-image: linear-gradient(
    to right,
    @orange 0%,
    @gradientOrange 51%,
    @orange 100%
  );
  box-shadow: 0px 2px 2px @orange;

  &:hover {
    box-shadow: 0px 4px 2px @gradientOrange;
  }
}
.gradient-btn.purple-btn {
  background-image: linear-gradient(
    to right,
    @purple 0%,
    @gradientPurple 51%,
    @purple 100%
  );
  box-shadow: 0px 2px 2px @purple;

  &:hover {
    box-shadow: 0px 4px 2px @gradientPurple;
  }
}
.gradient-btn.black-btn {
  background-image: linear-gradient(
    to right,
    @diffblack 0%,
    @black 51%,
    @diffblack 100%
  );
  box-shadow: 0px 2px 2px @diffblack;

  &:hover {
    box-shadow: 0px 4px 2px @black;
  }
}
.gradient-btn.white-btn {
  background-image: linear-gradient(
    to right,
    @diffwhite 0%,
    @gradientwhite 51%,
    @diffwhite 100%
  );
  box-shadow: 0px 2px 2px @boxShadowWhite;

  &:hover {
    box-shadow: 0px 4px 2px @gradientwhite;
  }
}