Buttons

Use Pixel's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Bootstrap 4 documentation
Main

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

Simple 
                                                        
<button class="btn mr-2 mb-2 btn-primary" type="button">Default</button>
<button class="btn mr-2 mb-2 btn-pill btn-primary" type="button">Round</button>
<button class="btn mr-2 mb-2 btn-pill btn-icon btn-primary" type="button">
    <span class="btn-inner-text">With Icon</span>
    <span class="btn-inner-icon"><i class="fas fa-brain"></i></span>
</button>
<button class="btn mr-2 mb-2 btn-pill btn-outline-primary" type="button">Outline</button>
<a href="#" class="btn mr-2 btn-link text-default font-weight-bold">Simple</a>
Colors

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

                                                        
<button class="btn mb-2 mr-2 btn-primary" type="button">Primary</button>
<button class="btn mb-2 mr-2 btn-secondary" type="button">Secondary</button>
<button class="btn mb-2 mr-2 btn-tertiary" type="button">Tertiary</button>
<button class="btn mb-2 mr-2 btn-success" type="button">Success</button>
<button class="btn mb-2 mr-2 btn-warning" type="button">Warning</button>
<button class="btn mb-2 mr-2 btn-danger" type="button">Danger</button>
<button class="btn mb-2 mr-2 btn-info" type="button">Info</button>
<button class="btn mb-2 mr-2 btn-dark" type="button">Dark</button>
Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

                                                        
<button class="btn mb-2 mr-2 btn-sm btn-primary" type="button">Small</button>
<button class="btn mb-2 mr-2 btn-primary" type="button">Regular</button>
<button class="btn mb-2 mr-2 btn-lg btn-primary" type="button">Large Button</button>