Making custom buttons

In the Customizing Bootstrap with variables recipe in this chapter, you can read how to change Bootstrap's buttons by setting the brand color variables. In this recipe, you will learn how to extend Bootstrap with one or more custom buttons by leveraging Sass.

Getting ready

First, read the Downloading and installing Bootstrap recipe of this chapter to find out how to download and install Bootstrap, enabling you to recompile the Bootstrap CSS code. You can edit the Bootstrap source files with a text editor.

How to do it...

Learn how to extend Bootstrap with custom buttons:

1. First, install Bootstrap as described in the Downloading and installing Bootstrap recipe of this chapter.
2. Open the scss/bootstrap.scss file and write the following lines of SCSS code at the end of this file:

   .btn-custom {
    @include button-variant(white, darkblue, green);
   }

3. After that, recompile Bootstrap's CSS by running the following command in your console:

   grunt dist
   

4. Now, you can include the newly...