.custom_button.alternative {
  --color-hover: #2b3044;
  --background: #362a89;
  --hover-back: #6d58ff;
  --hover-front: #f6f8ff;
}
.custom_button.simple {
  --background: #275efe;
  --background-hover: #1749db;
}
.custom_button {
  --color: #fff;
  --color-hover: #f53e6a;
  --background: #f53e6a;
  --background-hover: var(--background);
  --hover-back: #fff;
  --hover-front: #fff;
  padding: 10px 32px;
  border-radius: 20px;
  line-height: 24px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  color: var(--c, var(--color));
  background: var(--b, var(--background));
  transition: color 0.2s linear var(--c-d, 0.2s), background 0.3s linear var(--b-d, 0.2s);
}
.custom_button:not(.simple):before, .custom_button:not(.simple):after {
  content: '';
  position: absolute;
  background: var(--pb, var(--hover-back));
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  border-radius: var(--br, 40%);
  transform: translateY(var(--y, 50%));
  transition: transform var(--d, 0.4s) ease-in var(--d-d, 0s), border-radius 0.5s ease var(--br-d, 0.08s);
}
.custom_button:not(.simple):after {
  --pb: var(--hover-front);
  --d: 0.44s;
}
.custom_button div {
  z-index: 1;
  position: relative;
  display: inline-flex;
}
.custom_button div span {
  display: block;
  backface-visibility: hidden;
  transform: translateZ(0);
  animation: var(--name, none) 0.7s linear forwards 0.18s;
}
.custom_button.in {
  --name: move;
}
.custom_button.in:not(.out) {
  --c: var(--color-hover);
  --b: var(--background-hover);
}
.custom_button.in:not(.out):before, .custom_button.in:not(.out):after {
  --y: 0;
  --br: 5%;
}
.custom_button.in:not(.out):after {
  --br: 10%;
  --d-d: 0.02s;
}
.custom_button.in.out {
  --name: move-out;
}
.custom_button.in.out:before {
  --d-d: 0.06s;
}
@keyframes move {
  30%, 36% {
    transform: translateY(calc(-6px * var(--move))) translateZ(0) rotate(calc(-13deg * var(--rotate) * var(--part)));
  }
  50% {
    transform: translateY(calc(3px * var(--move))) translateZ(0) rotate(calc(6deg * var(--rotate) * var(--part)));
  }
  70% {
    transform: translateY(calc(-2px * var(--move))) translateZ(0) rotate(calc(-3deg * var(--rotate) * var(--part)));
  }
}
@keyframes move-out {
  30%, 36% {
    transform: translateY(calc(6px * var(--move))) translateZ(0) rotate(calc(13deg * var(--rotate) * var(--part)));
  }
  50% {
    transform: translateY(calc(-3px * var(--move))) translateZ(0) rotate(calc(-6deg * var(--rotate) * var(--part)));
  }
  70% {
    transform: translateY(calc(2px * var(--move))) translateZ(0) rotate(calc(3deg * var(--rotate) * var(--part)));
  }
}
/*
 html {
 box-sizing: border-box;
 -webkit-font-smoothing: antialiased;
 }
 * {
 box-sizing: inherit;
 &:before,
 &:after {
 box-sizing: inherit;
 }
 }
 // Center & dribbbl
 body {
 min-height: 100vh;
 display: flex;
 font-family: 'Inter UI', 'Inter', Arial;
 justify-content: center;
 align-items: center;
 background: #E1E6F9;
 @media(max-width: 440px) {
 flex-direction: column;
 }
 .button {
 display: block;
 margin: 0 8px;
 &:first-child {
 margin-left: 0;
 }
 &:last-child {
 margin-right: 0;
 }
 @media(max-width: 440px) {
 margin: 8px 0;
 }
 }
 .dribbble {
 position: fixed;
 display: block;
 right: 20px;
 bottom: 20px;
 img {
 display: block;
 height: 28px;
 }
 }
 .twitter {
 position: fixed;
 display: block;
 right: 64px;
 bottom: 14px;
 svg {
 width: 32px;
 height: 32px;
 fill: #1da1f2;
 }
 }
 }
 */