buttons.scss

$palettes: (
  "blue": (
    lightest: hsl(201, 87%, 72%),
    lighter:  hsl(201, 81%, 65%),
    light:    hsl(201, 77%, 58%),
    base:     hsl(201, 75%, 51%),
    dark:     hsl(201, 77%, 46%),
    darker:   hsl(201, 81%, 41%),
    darkest:  hsl(201, 87%, 36%)
  ),
  "white": (
    lightest: hsl(40, 0%, 100%),
    lighter:  hsl(40, 0%, 99%),
    light:    hsl(40, 10%, 98%),
    base:     hsl(40, 20%, 97%),
    dark:     hsl(40, 30%, 96%),
    darker:   hsl(40, 40%, 95%),
    darkest:  hsl(40, 40%, 93%)
  )
)

@function palette($palette, $tone: 'base') {
  @return map-get(map-get($palettes, $palette), $tone);
}

%btn {
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  font-weight: 500;
  padding: 0.6em 1.25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  touch-action: manipulation;
  user-select: none;
}

%btn-primary {
  @extend %btn;

  color: palette("white");
  background-color: palette("blue");
  background-image: linear-gradient(to bottom right, palette("blue"), adjust-hue(palette("blue"), 20deg));
  border: 1px solid palette("blue");
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

index.scss

[data-con="page"][data-act="index"] {
  .cta-btn {
    @extend %btn-primary;
  }
}

pricing.scss

[data-con="page"][data-act="pricing"] {
  .cta-btn {
    @extend %btn-primary;
    
    display: flex;
  }
}