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 Less.

Getting ready

This recipe requires Bootstrap's source files. You can download these from http://getbootstrap.com/getting-started/#download. To recompile Bootstrap, your system should have Grunt up and running. Read more about Grunt in Chapter 11, Compiling Less Real time for Development Using Grunt. You can edit the source files with a text editor.

How to do it...

You need to perform the following steps:

1. Download and unzip the source files into your working directory from http://getbootstrap.com/getting-started/#download.
2. Open the less/bootstrap.less file and write the following lines of Less code at the end of this file:

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

3. Then, recompile Bootstrap&apos...