Bootstrap 4 button customisation

Bootstrap 4 is on the way and will see two significant changes to the Bootstrap buttons:

  • There's now an outline variation of Bootstrap button with a hollow inside
  • LESS is now Sass so new Bootstrap button mixins

In this post we'll look at some basic Bootstrap 4 button customisation techniques using Sass and CSS.

icon icon
Bootstrap 4 buttons customisation

It's quite likely your site will have a different colour scheme to the standard Bootstrap branding and colours so very likely you'll need to change the colour of your primary Bootstrap button component so that's what we'll use as an example.

To do this you have a couple of options:

OPTION 1. Via the new _custom.scss file

Bootstrap 4 ships with a new _custom.scss file which is there to hold your Bootstrap variable overrides. All you need to is copy and paste the variables you want to override from the Bootstrap _variables.scss file, remove the !default from the variables in your _custom.scss file and then recompile Sass.

Example Bootstrap button variables:

$btn-primary-color: #fff;
$btn-primary-bg: #6f5499;
$btn-primary-border: #8c6bbf;

The advantage of this approach is it allows a more consistent override and results in slightly less CSS output as you're editing rather than overriding Bootstrap. You could for example alter the $brand-primary variable which sets the colour scheme for all the "primary" components (ie. btn-primary, card-primary etc) and update the colour scheme for all those components not just buttons in one go.


OPTION 2. Bootstrap button mixins

The next technique focuses just on overriding the .btn classes using Bootstrap's built in Bootstrap button mixins. Why reinvent the wheel?!

With these mixins you just need to pass the mixin your custom colour variables and then recompile your Sass code. Not need to worry about missing any selector overrides in your CSS this technique will catch them all.


Setup

Before we can use this technique we need to set up our Sass files accordingly and pull in the Bootstrap variables and mixins files that we want to use. We'll cover this in a bit more detail in a future article so this is the quick version, use the example files in the free download to help.

  • Download the full Bootstrap source, rename it "bootstrap" and save it to a folder name "plugins" in your site root so you have something like /plugins/bootstrap/
  • Create a new folder called "scss" in your site root then with that create Sass file called whatever you like, in our example it's "tutorial.scss"
  • Open up tutorial.css and add the following lines:
    @import '../plugins/bootstrap/scss/_variables.scss';
    @import '../plugins/bootstrap/scss/_mixins.scss';
  • Compile the code to check it's error free

Setup done and all the Bootstrap button mixins and variables are available for us to use in our custom code.

Override .btn-primary & .btn-primary-outline

In this example we override the .btn-primary & .btn-primary-outline to reflect our brand colours which is purple (HEX code: #6f5499). We can see examples in the Bootstrap _buttons.scss file.

.btn-primary

.btn-primary uses the button-variant($color, $background, $border) mixin which requires 3 arguments or variables to be passed to it: - $color: text colour of the button - $background: background colour of the button - $border: border colour of the button

.btn-primary {
  @include button-variant(#fff, #6f5499, #6f5499);
}


btn-outline-primary

.btn-outline-primary uses the button-outline-variant($color) mixin which only requires 1 argument or variable to be passed to it: - $color: text colour, hover background colour & border colour of the button

.btn-outline-primary {
  @include button-outline-variant(#6f5499);
}

That's it! The Bootstrap button mixins will handle all the hover & focus states for you giving you the following CSS output. You can reuse the same technique to override all your button colours as needed.

.btn-primary {
  color: #fff;
  background-color: #6f5499;
  border-color: #6f5499;
}
.btn-primary:hover {
  color: #fff;
  background-color: #574278;
  border-color: #523e71;
}
.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: #574278;
  border-color: #523e71;
}
.btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #574278;
  border-color: #523e71;
  background-image: none;
}
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .open > .btn-primary.dropdown-toggle:hover, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #463561;
  border-color: #332747;
}
.btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary:disabled:focus, .btn-primary:disabled.focus {
  background-color: #6f5499;
  border-color: #6f5499;
}
.btn-primary.disabled:hover, .btn-primary:disabled:hover {
  background-color: #6f5499;
  border-color: #6f5499;
}

.btn-outline-primary {
  color: #6f5499;
  background-image: none;
  background-color: transparent;
  border-color: #6f5499;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #6f5499;
  border-color: #6f5499;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
  color: #fff;
  background-color: #6f5499;
  border-color: #6f5499;
}
.btn-outline-primary:active, .btn-outline-primary.active, .open > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #6f5499;
  border-color: #6f5499;
}
.btn-outline-primary:active:hover, .btn-outline-primary:active:focus, .btn-outline-primary:active.focus, .btn-outline-primary.active:hover, .btn-outline-primary.active:focus, .btn-outline-primary.active.focus, .open > .btn-outline-primary.dropdown-toggle:hover, .open > .btn-outline-primary.dropdown-toggle:focus, .open > .btn-outline-primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #463561;
  border-color: #332747;
}
.btn-outline-primary.disabled:focus, .btn-outline-primary.disabled.focus, .btn-outline-primary:disabled:focus, .btn-outline-primary:disabled.focus {
  border-color: #a491c2;
}
.btn-outline-primary.disabled:hover, .btn-outline-primary:disabled:hover {
  border-color: #a491c2;
}

OPTION 3. Taking it further will custom mixins

If you wanted to customise the default Bootstrap button styles further you can target the .btn base class which is applied to all buttons or even creating your own custom Bootstrap button mixins.

Here's a quick example of a custom Bootstrap button mixin based on the button-variant mixin which gives us a nice Bootstrap 3 style buttons with a gradient background using the Bootstrap gradient mixins:

@mixin button-variant-gradient($color, $background, $border) {
  $active-background: darken($background, 10%);
  $active-border: darken($border, 12%);
    
  @include gradient-y($background, $active-background);    
  color: $color;
  background-color: $background;
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  @include hover {
    color: $color;
    background-color: $active-background;
    @include gradient-y($active-background, $background);
        border-color: $active-border;
  }

  &:focus,
  &.focus {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
  }

  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: $active-background;
        border-color: $active-border;
    // Remove the gradient for the pressed/active state
    background-image: none;
    @include box-shadow($btn-active-box-shadow);

    &:hover,
    &:focus,
    &.focus {
      color: $color;
      background-color: darken($background, 17%);
          border-color: darken($border, 25%);
    }
  }

  &.disabled,
  &:disabled {
    &:focus,
    &.focus {
      background-color: $background;
          border-color: $border;
    }
    @include hover {
      background-color: $background;
          border-color: $border;
    }
  }
}

And then we use it via a custom Bootstrap button class called .btn-gradient-primary:

.btn-gradient-primary {
  @include button-variant-gradient(#fff, #6f5499, #6f5499);
}


Summary

That's it, questions welcomed below. Don't forget to like us on Facebook or join our newsletter to stay up-to-date with all our tutorials, articles and freebies.

icon icon