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>

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-tertiary" type="button"><i class="far fa-thumbs-up me-2"></i>Secondary</button>

Icons only

Use the btn-icon-only class to create a button which only has an icon side. It can be a “like” button, or a “comment” button.

<button class="btn btn-icon-only 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-twitter text-white" type="button" aria-label="pinterest button" title="pinterest button">
    <span aria-hidden="true" class="fab fa-twitter"></span>
</button>
<button class="btn btn-icon-only btn-instagram" type="button" aria-label="youtube button" title="youtube button">
    <span aria-hidden="true" class="fab fa-instagram"></span>
</button>
<button class="btn btn-icon-only btn-dribbble" type="button" aria-label="github button" title="github button">
    <span aria-hidden="true" class="fab fa-dribbble"></span>
</button>
<button class="btn btn-icon-only btn-slack text-white" type="button" aria-label="twitch button" title="twitch button">
    <span aria-hidden="true" class="fab fa-slack"></span>
</button>
<button class="btn btn-icon-only btn-dropbox" type="button" aria-label="paypal button" title="paypal button">
    <span aria-hidden="true" class="fab fa-dropbox"></span>
</button>
<button class="btn btn-icon-only btn-github" type="button" aria-label="behance button" title="behance button">
    <span aria-hidden="true" class="fab fa-github"></span>
</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 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">
            <span class="fas fa-angle-down dropdown-arrow"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu py-0">
            <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
            <span class="fas fa-angle-down dropdown-arrow"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu py-0">
            <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
        </div>
    </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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-up dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group dropend 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">
        <span class="fas fa-angle-right dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group dropstart 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">
        <span class="fas fa-angle-left dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>

Social media buttons

Use the following buttons for social media related actions:







<button class="btn btn-facebook" type="button">
    <span class="me-1"><span class="fab fa-facebook-f"></span></span>
    Login with Facebook
</button>
<br>
<button class="btn btn-twitter text-white" type="button">
    <span class="me-1"><span class="fab fa-twitter"></span></span>
    Share on Twitter
</button>
<br>
<button class="btn btn-instagram" type="button">
    <span class="me-1"><span class="fab fa-instagram"></span></span>
    Share on Instagram
</button>
<br>
<button class="btn btn-dribbble" type="button">
    <span class="me-1"><span class="fab fa-dribbble"></span></span>
    Login with dribbble
</button>
<br>
<button class="btn btn-slack text-white" type="button">
    <span class="me-1"><span class="fab fa-slack"></span></span>
    Chat on Slack
</button>
<br>
<button class="btn btn-dropbox" type="button">
    <span class="me-1"><span class="fab fa-dropbox"></span></span>
    Smart Sync
</button>
<br>
<button class="btn btn-github" type="button">
    <span class="me-1"><span class="fab fa-github-alt"></span></span>
    Login with GitHub
</button>

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>
    <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" 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" 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>

Use the following dropdown elements to show a menu when clicking on the 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>

Sizing

In the following example you can see how you can add different sizes for the dropdown items:

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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>

Direction

Use the dropup, dropend, and dropstart classes to set the position of the dropdown menu:

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">
        <span class="fas fa-angle-up dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group dropend 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">
        <span class="fas fa-angle-right dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" 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">
        <span class="fas fa-angle-down dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>
<div class="btn-group dropstart 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">
        <span class="fas fa-angle-left dropdown-arrow"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu py-0">
        <a class="dropdown-item rounded-top" 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 rounded-bottom" href="#">Separated link</a>
    </div>
</div>