.shop-button {
  --border-color: linear-gradient(-45deg, #ffae00, #7e03aa, #00fffb);
  --border-width: 2px;
  --curve-size: 0.5em;
  --bg: #080312;
  --color: #afffff;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  color: var(--color) !important;
  text-decoration: none !important;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  clip-path: polygon( 0% var(--curve-size), var(--curve-size) 0, 100% 0, 100% calc(100% - var(--curve-size)), calc(100% - var(--curve-size)) 100%, 0 100% );
  transition: color 250ms, transform 200ms;
}

/* Gradient-Rand */

.shop-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--border-color);
  background-size: 300% 300%;
  animation: shop-move-bg 5s ease infinite;
  z-index: -2;
}

/* Innerer Hintergrund */

.shop-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg);
  z-index: -1;
  clip-path: polygon( var(--border-width) calc(var(--curve-size) + var(--border-width) * 0.5), calc(var(--curve-size) + var(--border-width) * 0.5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)), calc(100% - calc(var(--curve-size) + var(--border-width) * 0.5)) calc(100% - var(--border-width)), var(--border-width) calc(100% - var(--border-width)) );
  transition: clip-path 300ms;
}

/* Animation */

@keyframes shop-move-bg {
  0% {
    background-position: 31% 0%;
  }
  50% {
    background-position: 70% 100%;
  }
  100% {
    background-position: 31% 0%;
  }
}

/* Hover */

.shop-button:hover {
  color: #fff !important;
  transform: translateY(-1px);
}