How to Make a New Button Variant

Follow these simple steps to create a new button in the Spruce CSS framework.

You must declare your new colors under the $colors map's btn property. In this post, we make a "dark" button (both filled and outlined variation), and our declaration looks like this:

@use 'sprucecss/scss/spruce' with (
  $colors: (
    'btn': (
      'dark-background': hsl(205deg 100% 2%),
      'dark-background-hover': hsl(205deg 100% 5%),
      'dark-foreground': hsl(0deg 0% 100%),
      'dark-outline-background-hover': hsl(205deg 100% 2%),
      'dark-outline-border': hsl(260deg 4% 70%),
      'dark-outline-foreground': hsl(205deg 100% 2%),
      'dark-outline-foreground-hover': hsl(0deg 0% 100%),
      'dark-outline-focus-ring': hsl(205deg 100% 2%),
      'dark-shadow': hsl(205deg 100% 2% / 5%),
    ),
  ),
);

As you see, there are a bunch of options. The dark-outline-* is only for the outlined variation. We declare them to gain more control over their appearance.

For a basic button, you only need three of the values:

@use 'sprucecss/scss/spruce' with (
  $colors: (
    'btn': (
      'dark-background': hsl(205deg 100% 2%),
      'dark-background-hover': hsl(205deg 100% 5%),
      'dark-foreground': hsl(0deg 0% 100%),
    ),
  ),
);

Using the btn-variant and btn-variant-outline mixins you can generate two custom variant.

.btn--dark {
  @include btn-variant('dark');
}

.btn--outline-dark {
  @include btn-variant-outline('dark');
}

After the declaration, you can use your new button modification classes.

<a href="https://sprucecss.com" class="btn btn--dark">
  Open Spruce CSS
</a>

<a href="https://sprucecss.com" class="btn btn--outline-dark">
  Open Spruce CSS
</a>

If you declare the dark-shadow property, you can use the btn--dark-shadow to add a shadow to the button but only on the filled variation.

<a href="https://sprucecss.com" class="btn btn--dark btn--dark-shadow">
  Open Spruce CSS
</a>