Buttons

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

Buttons

The following are the default style of buttons from Pixel. Use the modified classes (ie. btn-primary or btn-secondary) to change colors:

<button class="btn btn-primary text-dark mr-2 mb-2" type="button">Secondary</button>
<button class="btn btn-primary text-secondary mr-2 mb-2" type="button">Secondary</button>
<button class="btn btn-primary text-info mr-2 mb-2" type="button">Info</button>
<button class="btn btn-primary text-success mr-2 mb-2" type="button">Success</button>
<button class="btn btn-primary text-danger mr-2 mb-2" type="button">Danger</button>
<button class="btn btn-primary text-dark mr-2 mb-2" type="button">Dark</button>
<button class="btn btn-primary text-gray" type="button">Gray</button>

Pill buttons

Adding the .btn-pill modifier class will add a larger amount of border radius to the button:

<button class="btn btn-primary btn-pill text-dark mr-2 mb-2" type="button">Secondary</button>
<button class="btn btn-primary btn-pill text-secondary mr-2 mb-2" type="button">Secondary</button>
<button class="btn btn-primary btn-pill text-info mr-2 mb-2" type="button">Info</button>
<button class="btn btn-primary btn-pill text-success mr-2 mb-2" type="button">Success</button>
<button class="btn btn-primary btn-pill text-danger mr-2 mb-2" type="button">Danger</button>
<button class="btn btn-primary btn-pill text-dark mr-2 mb-2" type="button">Dark</button>
<button class="btn btn-primary btn-pill text-gray" type="button">Gray</button>

Buttons with icon

Example with buttons coupled with an icon:

<button class="btn btn-primary mr-3" type="button">
    <span class="mr-1"><span class="fas fa-book-open"></span></span>
    Icon Left
</button>
<button class="btn btn-primary" type="button">
    Icon Right
    <span class="ml-1"><span class="fas fa-book-open"></span></span>
</button>

Icon only buttons

You can use the border utility class, like .rounded-circle if you want circle button.

<button class="btn btn-icon-only btn-primary mr-3" type="button" aria-label="love button" title="love button">
    <span aria-hidden="true" class="far fa-thumbs-up"></span>
</button>
<button class="btn btn-icon-only btn-primary btn-pill text-danger" type="button" aria-label="love button" title="love button">
    <span aria-hidden="true" class="far fa-heart"></span>
</button>

Button animations Pro

In todays world well animated elements can make the difference between good and great layouts. Use animation modifier classes .animate-*-# (eg. .animate-up-1, .animate-down-3). You can use up, right, down and bottom and use a counter from 1 to 5 to specify the distance in pixels.

<button class="btn btn-primary animate-up-2 mr-2" type="button">Animate up</button>
<button class="btn btn-primary animate-right-3 mr-2" type="button">Animate right</button>
<button class="btn btn-primary animate-down-2 mr-2" type="button">Animate down</button>
<button class="btn btn-primary animate-left-3 mr-2" type="button">Animate left</button>

Example of using a dropdown menu with a button:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<div class="dropdown">
    <div class="btn-group mr-2 mb-2">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fas fa-angle-down dropdown-arrow"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
    <div class="btn-group mb-2 mr-2">
        <button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="fas fa-angle-down dropdown-arrow"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </div>
</div>

Use dropup, dropdown, dropright or dropleft to set the direction of the dropdown:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<div class="btn-group dropup mb-2 mr-2">
    <button type="button" class="btn btn-primary">Up</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-angle-up dropdown-arrow"></i>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group dropright mb-2 mr-2">
    <button type="button" class="btn btn-primary">Right</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-angle-right dropdown-arrow"></i>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group mb-2 mr-2">
    <button type="button" class="btn btn-primary">Down</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-angle-down dropdown-arrow"></i>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group dropleft mb-2 mr-2">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split mr-n1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-angle-left dropdown-arrow"></i>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Separated link</a>
    </div>
</div>

Social media buttons Pro

Use the following buttons for social media related actions:




<button class="btn btn-facebook mb-2" type="button">
    <span class="mr-1"><span class="fab fa-facebook-f"></span></span>
    Login with Facebook
</button>
<br>
<button class="btn btn-twitter mb-2" type="button">
    <span class="mr-1"><span class="fab fa-twitter"></span></span>
    Follow on Twitter
</button>
<br>
<button class="btn btn-pill btn-pinterest mb-2" type="button">
    <span class="mr-1"><span class="fab fa-pinterest-p"></span></span>
    Share on Pinterest
</button>
<br>
<button class="btn btn-pill btn-github" type="button">
    <span class="mr-1"><span class="fab fa-github-alt"></span></span>
    Login with GitHub
</button>

Icon only Pro

Use the following buttons for social media related actions:

<button class="btn btn-icon-only btn-facebook mr-3" type="button" aria-label="facebook button" title="facebook button">
    <span aria-hidden="true" class="fab fa-facebook"></span>
</button>
<button class="btn btn-icon-only btn-pinterest mr-3" type="button" aria-label="pinterest button" title="pinterest button">
    <span aria-hidden="true" class="fab fa-pinterest-p"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-youtube mr-3" type="button" aria-label="youtube button" title="youtube button">
    <span aria-hidden="true" class="fab fa-youtube"></span>
</button>
<button class="btn btn-icon-only btn-pill btn-github" type="button" aria-label="github button" title="github button">
    <span aria-hidden="true" class="fab fa-github-alt"></span>
</button>

Loading buttons Pro

Use the following classes to indicate loading:

<button class="btn btn-primary mr-3" type="button">
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button">
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    <span class="ml-1">Loading...</span>
</button>

Button sizing & states

Use the following modifier classes to update the size & state of the button.

Button size

With Pixel there comes 3 sizes for button: .btn-sm, .btn-md and .btn-lg:

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

Block level Buttons

Use .btn-block to make the button take up 100% of the width of the parent element:

<button class="btn btn-primary btn-block" type="button">Block button</button>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<button class="btn btn-primary mr-3" type="button" disabled>Regular</button>