Custom style buttons for Bootstrap 4

bootstrap4customstylebuttonsscss

Custom style buttons for Bootstrap 4 Tutorial by Mirko Zovko | 18. Mar. 2019.

Bootstrap is one of the most popular, and most powerful front-end framework for developing responsive, mobile first websites, and before everything it's also free. Correct version of it is Bootstrap 4, and main difference from Bootstrap 3 is that all of the css are now written in SCSS and it using flex. So with not much experience in front-end you can create beautiful and professional websites in no time.

In this tutorial I'll show you how can you override button classes and create your own button style.

To create custom style buttons for bootstrap 4 first you need to add is bootstrap component to your project, and what is most important is to add your style under the bootstrap style so that your code can override original bootstrap code.

About bootstrap buttons you need to know that they are contained of multiple classes, depend on what style, color and size you want.  Main class for bootstrap button is .btn class. That class contain core for the buttons, font size, border radius, padding etc.. Full css of .btn main button class you can see below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

Bootstrap have several predefined button classes and they are created using semantic style depend on the purpose or context of the button. Those classes are: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark and btn-link. Except those classes bootstrap 4 contain one more sets of style, it's outline style that contain only border color, and that classes are: btn-outline-primary, btn-outline-secondary, btn-outline-success, btn-outline-danger, btn-outline-warning, btn-outline-info, btn-outline-light and btn-outline-dark. Except those styles bootstrap have two classes that define button size, and that is btn-sm for small button, and btn-lg for large button.

Now when you know the basic I can explain you how to create your custom style buttons for bootstrap 4. First you need to know what style you want to add to your button, and keep in mind that in core .btn class you need to add all style that is in common for all of your style, and other classes (for example btn-primary, btn-secondary) you will use to add only your color. Of course that you can add different styles for every button, but this is proper way to do for bootstrap button style.
In this case I wanted to add border radius to buttons,  different font (Raleway), material shadow and some other stuff. This is my overridden core class .btn

1
2
3
4
5
6
7
8
.btn {
    border-radius: 20px;
    font-family: 'Raleway', sans-serif;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 0px !important;
    font-size: 0.95rem;
    padding: .475rem .85rem;
}

As you can is, it's not so hard to change some style. For second class you can add color you want. For this tutorial I used pastel material colors, and for hover a little bigger shadow. Complete style example you can see in this jsFiddle. I wrote it in SCSS and separately added color variables so that you can easily change it and play with it trying to add some of your own style and colors. Enjoy! :)