How to set custom button text color in Bootstrap 4 and Sass?

Question

I would like to create a new button style in Bootstrap 4 with a white (#fff) text color. Mixin button-variant automatically sets the text color based on the background color. How can I use this mixin and set the color at the same time, without modifying _buttons.scss?

custom.scss

.my_button {
  @include button-variant(HOW TO SET TEXT COLOR TO WHITE?);
}

_buttons.scss

@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  color: color-yiq($background);
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: color-yiq($hover-background);
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

Whitethroat

Answer 1

This is similar to: How to create new set of color styles in Bootstrap 4 with sass

You need to use @include for the custom button, set the color:, and pass in the appropriate mixin params...

.btn-custom {
    @include button-variant(pink, red, red, #444, #333, red);
    color: #fff;
}

https://www.codeply.com/go/EHwnjvUXac

---

Related: Extending Bootstrap 4 and SASS

Cervin

I tried this and it didn't work. I forgot to mention I am using <a> instead of <button>. Looks like this doesn't work with <a>. Any idea how to solve this without using <button>? – Whitethroat

Thank you! It works. I tried color: #fff; before, but it looks like I forgot to disable cache in my browser :) – Whitethroat