.button99 {
  --background: #681143;

  --text: #fff;

  --cart: #fff;

  --tick: var(--background);

  position: relative;

  border: 1px solid #681143;

  background: none;

  padding: 8px 28px;

  border-radius: 8px;

  -webkit-appearance: none;

  -webkit-tap-highlight-color: transparent;

  -webkit-mask-image: -webkit-radial-gradient(white, black);

  overflow: hidden;

  cursor: pointer;

  text-align: center;

  min-width: 144px;

  color: var(--text);

  background: var(--background);

  transform: scale(var(--scale, 1));

  transition: transform 0.4s cubic-bezier(0.36, 1.01, 0.32, 1.27);
}
.button99:hover {
  border: 1px solid #681143;
  background-color: #fff;
  color: #681143;
}

.button99:active {
  --scale: 0.95;
}

.button99 span {
  font-size: 14px;

  font-weight: 500;

  display: block;

  position: relative;

  padding-left: 24px;

  margin-left: -8px;

  line-height: 26px;

  transform: translateY(var(--span-y, 0));

  transition: transform 0.7s ease;
}

.button99 span:before,
.button99 span:after {
  content: "";

  width: var(--w, 2px);

  height: var(--h, 14px);

  border-radius: 1px;

  position: absolute;

  left: var(--l, 8px);

  top: var(--t, 6px);

  background: currentColor;

  transform: scale(0.75) rotate(var(--icon-r, 0deg))
    translateY(var(--icon-y, 0));

  transition: transform 0.65s ease 0.05s;
}

.button99 span:after {
  --w: 14px;

  --h: 2px;

  --l: 2px;

  --t: 12px;
}

.button99 .cart {
  position: absolute;

  left: 50%;

  top: 50%;

  margin: -13px 0 0 -18px;

  transform-origin: 12px 23px;

  transform: translateX(-120px) rotate(-18deg);
}

.button99 .cart:before,
.button99 .cart:after {
  content: "";

  position: absolute;
}

.button99 .cart:before {
  width: 6px;

  height: 6px;

  border-radius: 50%;

  box-shadow: inset 0 0 0 2px var(--cart);

  bottom: 0;

  left: 9px;

  filter: drop-shadow(11px 0 0 var(--cart));
}

.button99 .cart:after {
  width: 16px;

  height: 9px;

  background: var(--cart);

  left: 9px;

  bottom: 7px;

  transform-origin: 50% 100%;

  transform: perspective(4px) rotateX(-6deg) scaleY(var(--fill, 0));

  transition: transform 1.2s ease var(--fill-d);
}

.button99 .cart svg {
  z-index: 1;

  width: 36px;

  height: 26px;

  display: block;

  position: relative;

  fill: none;

  stroke: var(--cart);

  stroke-width: 2px;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.button99 .cart svg polyline:last-child {
  stroke: var(--tick);

  stroke-dasharray: 10px;

  stroke-dashoffset: var(--offset, 10px);

  transition: stroke-dashoffset 0.4s ease var(--offset-d);
}

.button99.loading {
  --scale: 0.95;

  --span-y: -32px;

  --icon-r: 180deg;

  --fill: 1;

  --fill-d: 0.8s;

  --offset: 0;

  --offset-d: 1.73s;
}

.button99.loading .cart {
  animation: cart 3.4s linear forwards 0.2s;
}

@keyframes cart {
  12.5% {
    transform: translateX(-60px) rotate(-18deg);
  }

  25%,
  45%,
  55%,
  75% {
    transform: none;
  }

  50% {
    transform: scale(0.9);
  }

  44%,
  56% {
    transform-origin: 12px 23px;
  }

  45%,
  55% {
    transform-origin: 50% 50%;
  }

  87.5% {
    transform: translateX(70px) rotate(-18deg);
  }

  100% {
    transform: translateX(140px) rotate(-18deg);
  }
}