Bootstrap Button Customization Explained

Hey geeks! Today we are going to walk you through the process of customizing the stock Bootstrap button. As web developers, you must have heard about or used the Bootstrap toolkit in your projects. It’s a great library full of powerful web components. But we can agree on the fact that all websites built with the Bootstrap toolkit seem to appear similar in terms of UI/UX. However, customising them is actually very easy and you do not need to be an expert in CSS for that.

Bootstrap Buttons

Bootstrap provides us with the following default buttons:

See the Pen Bootstrap Buttons by Aritra Mukherjee (@mukherjee96) on CodePen.

You can learn more about them here.

While they make your website attractive, Bootstrap buttons have limited customizability and can become repetitive after a few projects. But fear not, our guide will make it easy for you!

Related: Top Tools For Creating Great Content For Free!

Code Along

The following HTML document is what we are working with today. Copy and paste it into your editor of choice and follow along!

<!DOCTYPE html>
<html lang="en">
  <head>
    <style type="text/css"></style>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"
    />
  </head>
  <body>
    <div class="text-center">
      <button class="btn btn-primary" type="button" onclick="display()">
        Click Here
      </button>
      <p id="demo" class="p-3"></p>
    </div>
    <script>
      function display() {
        document.getElementById('demo').innerHTML = 'Hello There!';
      }
    </script>
  </body>
</html>

Related: JavaScript Promises Explained!

Customize the Background Colour

Let us change the background of our button to a nice purple colour and the text to black. Of course, you can choose any colour of your choice. Insert the following CSS in the style tag located in line number 4:

.btn-primary {
   background-color: #ad1b98 !important;
   color: black !important;
}

See the Pen Bootstrap button color customization by Aritra Mukherjee (@mukherjee96) on CodePen.

Related: JavaScript Arrow Functions Explained!

Customizing Button Animations

We have successfully changed the appearance of the button and you can leave it here if you want. However, you must have noticed that the button is still using the default hover and click animations. Let’s customize them!

Custom Hover Animation

Here we are changing the colour of the button and the text such that it changes when the mouse hovers over the button. Add the following code inside the <style> tag.

.btn-primary:hover {
	background-color: #20051c !important;
	color: white !important;
}

See the Pen Bootstrap button custom hover animation by Aritra Mukherjee (@mukherjee96) on CodePen.

Custom Transition Animation

With some experiments, you can also add cool transition effects. Let’s add transitions so that the button is enlarged on hover!

.btn-primary{
	background-color: #ad1b98 !important;
	color: black !important;
	-webkit-transition: font-size 0.5s;
	transition: font-size 0.5s;
}
.btn-primary:hover{
	background-color: #20051c !important;
	color: white !important;
	font-size: 1.1em;
}

See the Pen Bootstrap button enlarge on hover by Aritra Mukherjee (@mukherjee96) on CodePen.

Related: Progressive Web Apps (PWA) Explained!

Custom Click Animation

There are mainly two kinds of selectors that are used for the purpose: active and focus. You can use them according to your requirement.

Focus

Focus represents the state when the button is currently selected. Let us give it a lighter purple colour. Add the following CSS:

.btn-primary:focus{
	background-color: #e34ccd !important;
	color: white !important;
}

See the Pen Bootstrap button custom focus animation by Aritra Mukherjee (@mukherjee96) on CodePen.

Active

Active represents the state when the button is currently being activated by the user. Let us take the same example.

.btn-primary:active{
	background-color: #e34ccd !important;
	color: white !important;
}

See the Pen Bootstrap button custom active animation by Aritra Mukherjee (@mukherjee96) on CodePen.

Related: What is JavaScript Object Notation (JSON)?

When it comes to CSS selectors, there are endless possibilities for you to create unique effects such as ripple effect or any smooth animation. You can learn more about CSS selectors here.

We will discuss other cool animation tips and tricks with CSS in our future articles. Till then, keep experimenting!