.buttons-container
  button.button.button--vertical Subscribe
  button.button.button--horizontal Subscribe
  button.button.button--radial Subscribe

body {
  background: #383d42;
  font-family: "Titillium Web", sans-serif;
  font-size: 16px;
  margin: 0;
}

// Container
.buttons-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;

  --button-spacing: 20px 0;
}

// Buttons
.button {
  background-color: var(--button-background-color);
  background-image: var(--button-background-image);
  background-position: var(--button-background-position);
  background-size: var(--button-background-size);
  border: none;
  border-radius: 35px/50%;
  color: var(--button-color, #383d42);
  cursor: pointer;
  font-family: "Titillium Web", sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  margin: var(--button-spacing);
  outline: none;
  padding: 15px 80px;
  text-transform: uppercase;
  transition: background var(--button-transition-duration, 0.25s) ease-in-out;
  will-change: background;

  // Horizontal gradient button
  &--horizontal {
    --button-background-image: linear-gradient(
      90deg,
      #dcff1a,
      #26ffd5,
      #ff44ba
    );
    --button-background-position: 0 0;
    --button-background-size: 200% 100%;
    --button-color: #383d42;

    &:hover {
      --button-background-position: 100% 0;
    }
  }

  // Vertical gradient button
  &--vertical {
    --button-background-image: linear-gradient(0, #3d84ff, #26ffd5);
    --button-background-position: bottom left;
    --button-background-size: 100% 125%;
    --button-color: #fff;

    &:hover {
      --button-background-size: 100% 100%;
    }
  }

  // Radial gradient button
  &--radial {
    --button-background-image: radial-gradient(
        ellipse at top,
        #e66465,
        transparent
      ),
      radial-gradient(ellipse at top, #b732e6, transparent);
    --button-background-position: center center;
    --button-background-size: 100% 100%;
    --button-color: #4e173c;
    --button-transition-duration: 0.5s;

    &:hover {
      --button-background-size: 200% 100%;
    }
  }
}