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" type="button">Primary</button>
<button class="btn btn-secondary" type="button">Secondary</button>
<button class="btn btn-tertiary" type="button">Tertiary</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-dark" type="button">Dark</button>
<button class="btn btn-gray-700" type="button">Gray</button>
<button class="btn btn-light" type="button">Light</button>
<button class="btn btn-white" type="button">White</button>

Buttons with outline

Use the following modifier class to add colors only to the outline of the button. Can be used very well when there are two buttons in the layout but the outlined one is of secondary importance:

<button class="btn btn-outline-primary" type="button">Primary</button>
<button class="btn btn-outline-secondary" type="button">Secondary</button>
<button class="btn btn-outline-tertiary" type="button">Tertiary</button>
<button class="btn btn-outline-info" type="button">Info</button>
<button class="btn btn-outline-success" type="button">Success</button>
<button class="btn btn-outline-danger" type="button">Danger</button>
<button class="btn btn-outline-dark" type="button">Dark</button>
<button class="btn btn-outline-gray-700" type="button">Gray</button>
Default Primary Secondary Tertiary Info Success Danger Dark Gray 
<a href="#" class="text-default me-3">Default</a>
<a href="#" class="text-primary me-3">Primary</a>
<a href="#" class="text-secondary me-3">Secondary</a>
<a href="#" class="text-tertiary me-3">Tertiary</a>
<a href="#" class="text-info me-3">Info</a>
<a href="#" class="text-success me-3">Success</a>
<a href="#" class="text-danger me-3">Danger</a>
<a href="#" class="text-dark me-3">Dark</a>
<a href="#" class="text-gray-700">Gray</a>

Buttons with icon

Example with buttons coupled with an icon:

<button class="btn mb-2 me-2 btn-outline-primary" type="button"><i class="far fa-heart me-2"></i>Primary</button>
<button class="btn mb-2 me-2 btn-outline-secondary" type="button"><i class="far fa-thumbs-up me-2"></i>Secondary</button>

Circle buttons

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

<button class="btn btn-icon-only btn-circle btn-facebook" 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-circle btn-pinterest" type="button" aria-label="pinterest button" title="pinterest button">
    <span aria-hidden="true" class="fab fa-pinterest-p"></span>
</button>

Dropdown buttons Pro

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="btn-group me-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-bs-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 mb-2 me-2">
    <button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split"
        data-bs-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>

Use the .btn-sm and .btn-lg modifier classes to change the size of the dropdown buttons:

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 me-2 mb-2">
    <button type="button" class="btn btn-sm btn-primary">Small</button>
    <button type="button" class="btn btn-sm btn-primary dropdown-toggle dropdown-toggle-split" data-bs-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 me-2 mb-2">
    <button type="button" class="btn btn-secondary">Default</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split me-n1" data-bs-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 mb-2 me-2">
    <button type="button" class="btn btn-lg btn-tertiary">Large</button>
    <button type="button" class="btn btn-lg btn-tertiary dropdown-toggle dropdown-toggle-split" data-bs-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>

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 me-2">
    <button type="button" class="btn btn-primary">Up</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-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 me-2">
    <button type="button" class="btn btn-primary">Right</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-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 me-2">
    <button type="button" class="btn btn-primary">Down</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-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 me-2">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split me-n1" data-bs-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

Use the following buttons for social media related actions:







<div class="d-flex flex-wrap">
    <button class="btn btn-facebook me-3 mb-3" type="button">
        <span class="me-1"><span class="fab fa-facebook-f"></span></span>
        Login with Facebook
    </button>
    <br>
    <button class="btn btn-pinterest me-3 mb-3" type="button">
        <span class="me-1"><span class="fab fa-pinterest-p"></span></span>
        Share on Pinterest
    </button>
    <br>
    <button class="btn btn-youtube me-3 mb-3" type="button">
        <span class="me-1"><span class="fab fa-youtube"></span></span>
        Watch on YouTube
    </button>
    <br>
    <button class="btn btn-github me-3 mb-3" type="button">
        <span class="me-1"><span class="fab fa-github-alt"></span></span>
        Login with GitHub
    </button>
    <br>
    <button class="btn btn-twitch me-3 mb-3" type="button">
        <span class="me-1"><span class="fab fa-twitch"></span></span>
        Subscribe Now
    </button>
    <br>
    <button class="btn btn-paypal me-3 mb-3" type="button">
        <span class="me-1"><span class="fab fa-paypal"></span></span>
        Donate with PayPal
    </button>
    <br>
    <button class="btn btn-behance" type="button">
        <span class="me-1"><span class="fab fa-behance"></span></span>
        Follow us
    </button>
</div>

Animated buttons Pro

Use the following classes to animate the buttons when hovering:

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

Loading buttons Pro

Use the following classes to indicate loading:

<button class="btn btn-primary" type="button" disabled>
    <div class="spinner-border spinner-border-sm" role="status">
    <span class="sr-only">Loading...</span>
    </div>
</button>
<button class="btn btn-primary" type="button" disabled>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    <span class="ms-1">Loading...</span>
</button>
<button class="btn btn-secondary" type="button" disabled>
    <span class="ms-1">Loading...</span>
    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</button>

Button sizing & states

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

Button size

There are 3 sizes for button: .btn-sm, .btn-md and .btn-lg:

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

Block level Buttons

Use the .w-100 class to create a block level button:

<button class="btn w-100 btn-secondary text-dark" type="button">Block</button>

Disabled state

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

<button type="button" class="btn mb-2 me-2 btn-primary" disabled>Primary button</button>
<button type="button" class="btn mb-2 me-2 btn-secondary" disabled>Button</button>