To start, open up _buttons.scss located in /css/components in our project directory. The first thing we need to customize is the base .btn CSS class. Once we have applied some changes there, we'll add more CSS to control the look and feel of the different button variations. Insert the following CSS at the top of the file for the base button class:

.btn { 
  background-color: $grey; 
  border-color: $grey; 
 
  @include border-radius(20px); 
} 

To keep things simple, I'm only going to overwrite a few properties. You're totally free to get more creative and change additional properties to make your buttons look different from the Bootstrap default link. Let's break down what I've done:

Once you have saved these changes, go to the terminal and run the harp compile command from the root of the project directory. Then fire up the server and open the home page of the project that has a bunch of buttons on it. Your buttons should now look like this:

Now that might not look too useful, but it's important that we customize the base .btn class first; now we'll continue building the component out by applying our color palette to all of the different button variations.

In this next section, we will extend the button component further by applying our color palette to all the different Bootstrap button variations. Before we get to all the different button types, let's start by customizing the .btn-primary variation. Enter the following code in the _buttons.scss file after the base .btn styles:

.btn-primary { 
   background-color: $purple; 
   border-color: $purple; 
} 
 
.btn-primary:hover, 
.btn-primary:active { 
   background-color: $purple2; 
   border-color: $purple2; 
} 

There are a few different things going on so let's review them all:

Save the file, run a harp compile in the terminal, and then open up the home page in your browser. If everything was coded correctly, your buttons should now look like this:

As you can see, the primary button is now purple! It's as simple as that; you can start to apply a custom look and feel to the button component. Let's build out the rest of the button color variations by entering the following code into the _buttons.scss file:

.btn-secondary { 
   background-color: $off-white; 
   border-color: $off-white; 
} 
 
.btn-secondary:hover, 
.btn-secondary:active { 
   background-color: $grey; 
   border-color: $grey; 
} 
 
.btn-success { 
   background-color: $green; 
   border-color: $green; 
} 
 
.btn-success:hover, 
.btn-success:active { 
   background-color: $green2; 
   border-color: $green2; 
} 
 
.btn-info { 
   background-color: $blue; 
   border-color: $blue; 
} 
 
.btn-info:hover, 
.btn-info:active { 
   background-color: $blue2; 
   border-color: $blue2; 
} 
 
.btn-warning { 
   background-color: $yellow; 
   border-color: $yellow; 
} 
 
.btn-warning:hover, 
.btn-warning:active { 
   background-color: $yellow2; 
   border-color: $yellow2; 
} 
 
.btn-danger { 
   background-color: $red; 
   border-color: $red; 
} 
 
.btn-danger:hover, 
.btn-danger:active { 
   background-color: $red2; 
   border-color: $red2; 
} 

That's a bunch of code but it should be fairly easy to understand. I've simply followed the same steps I completed for the primary button for every other button variation. Along the way, I've replaced the default Bootstrap color values with our custom color palette. Once you're done, all of your buttons should now look like this:

We've now successfully customized the entire button component. As I mentioned earlier, there may be additional things you might want to do to the buttons. However, at the very least, we've done enough to show how you can make the component your own. The next step in this process is to go through every Bootstrap component one by one and apply the same customization process. We call this writing your own Bootstrap theme.