> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/mixin/button-variant.md).

# button-variant()

{% code title="" lineNumbers="true" %}

```scss
// Button variant mixin
@mixin button-variant($name, $bg-color, $color: 'light', $lightness: -2%) {
  &.btn-#{$name} {
    @include background($bg-color);
    border-color: color($bg-color, $lightness: $lightness - 1%);
    @include color($color);
    @include color-visited($color);
    &:focus {
      @include control-shadow($bg-color);
    }
    &:focus,
    &:hover {
      @include background($bg-color, $lightness: $lightness);
      border-color: color($bg-color, $lightness: $lightness - 3%);
    }
    @include color-focus($color);
    @include color-hover($color);

    &:active,
    &.active {
      @include background($bg-color, $lightness: $lightness - 5%);
      border-color: color($bg-color, $lightness: $lightness - 8%);
    }
    @include color-active($color);

    &.loading {
      &::after {
        border-bottom-color: color($color);
        border-left-color: color($color);
      }
    }
  }
}
```

{% endcode %}