2

I am new to using SASS and I have found a lot of posts about how to change the primary button color, which is easy, but I would also like the change the border and the hover. The only way I can think of is to add an extra class which I have called 'basic'. Here is my code:

SCSS

$btn-bg: $bright-pink;    

@mixin button-variant($color, $background, $border) {
color: #fff;
background-color: $btn-bg;
border: 3px solid $btn-bg;

&:hover {
    color: $btn-bg;
    background-color: $transparent;
    border: 3px solid $btn-bg;
  }
}

.btn-primary.basic { @include button-variant
  (#fff,
  $btn-basic,
  3px solid $btn-bg); 
}

HTML

 <button type="button" class="btn btn-primary basic">Primary text</button>

Is there a better way of doing this? Can I override the primary button without adding an extra class?

MrFox
  • 169
  • 1
  • 13
  • *"but I would also like the change the border and the hover"* both the duplicates show this.. look at the 2nd and 3rd parameters of the button-variant mixin. – Carol Skelly Jan 28 '20 at 12:36
  • I've discovered my issue. I was loading the bootstrap.scss files after my custom override files in custom.scss, so nothing was being overwritten. Answer is here https://stackoverflow.com/questions/43565650/how-to-create-custom-scss-to-override-variable-in-bootstrap-4-alpha-6 – MrFox Jan 31 '20 at 13:50

1 Answers1

2

To create a new variant of a button, use the following SASS.

Then use "btn-primary basic" ass the class on the element.

$btn-background: #39a4d2;
$btn-border: #56a1c5;
$btn-color: #fff;

@mixin button-variant($background, $border, $color) {
    background-color: $btn-background;
    border: 2px solid $btn-border;
    color: #fff;

    &:hover {
        border: 2px solid $btn-background;
        color: $btn-color;
    }
}

.btn-primary {
    &.basic {
        @include button-variant($btn-background, $btn-border, $btn-color);
    }
}
Jon Winstanley
  • 23,010
  • 22
  • 73
  • 116
Codehan25
  • 2,704
  • 10
  • 47
  • 94