@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.gradient-border {
  background: #fff;
  position: relative;
  border-radius: 3px;
  align-items: center;
  align-self: center;
  margin-right: 0;
  justify-content: center;
  height: 50px;
  min-width: 120px;
  color: #1d1f20;
  font-size: 1.7rem;
  box-sizing: content-box;
  padding: 0;
  border: none;
  overflow: visible;
  margin-top: 1em;
  &::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    height: calc(100% + 6px);
    width: calc(100% + 6px);
    background: linear-gradient(
      60deg,
      #f79533,
      #f37055,
      #ef4e7b,
      #a166ab,
      #5073b8,
      #1098ad,
      #07b39b,
      #6fba82
    );
    border-radius: 6px;
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
  }
}