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;
}
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