Purpose Website UI Kit

Buttons

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

Open Bootstrap Docs

Example

<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-circle">Rounded circle</button>

Animated buttons

<button type="button" class="btn btn-primary btn-animated btn-animated-x">
    <span class="btn-inner--visible">Play music</span>
    <span class="btn-inner--hidden"><i class="fas fa-play"></i></span>
</button>
<button type="button" class="btn btn-secondary btn-animated btn-animated-y">
    <span class="btn-inner--hidden">Buy</span>
    <span class="btn-inner--visible"><i class="fas fa-shopping-cart"></i></span>
</button>
<button type="button" class="btn btn-primary btn-animated btn-animated-x">
    <span class="btn-inner--visible">Next step</span>
    <span class="btn-inner--hidden"><i class="fas fa-arrow-right"></i></span>
</button>
<button type="button" class="btn btn-dark btn-animated btn-animated-y">
    <span class="btn-inner--visible"><i class="fas fa-play"></i></span>
    <span class="btn-inner--hidden"><i class="fas fa-pause"></i></span>
</button>

Labeled buttons

1030
300
5500
5500
1030
10000 
<div class="btn-group btn-action-label" role="group" aria-label="Like">
    <button type="button" class="btn btn-sm btn-secondary btn-action">
        <i class="fas fa-thumbs-up"></i>
        <span>Like</span>
    </button>
    <a href="#" class="btn btn-sm btn-outline-secondary btn-label">1030</a>
</div>
<div class="btn-group btn-action-label" role="group" aria-label="Like">
    <a href="#" class="btn btn-sm btn-outline-secondary btn-label">300</a>
    <button type="button" class="btn btn-sm btn-secondary btn-action">
        <i class="fas fa-share-alt"></i>
    </button>
</div>
<div class="btn-group btn-action-label" role="group" aria-label="Like">
    <button type="button" class="btn btn-sm btn-primary btn-action">
        <i class="fas fa-code-branch"></i>
    </button>
    <a href="#" class="btn btn-sm btn-outline-primary btn-label">5500</a>
</div>
<div class="btn-group btn-action-label" role="group" aria-label="Like">
    <a href="#" class="btn btn-sm btn-outline-primary btn-label">5500</a>
    <button type="button" class="btn btn-sm btn-primary btn-action">
        <i class="fas fa-code-branch"></i>
        <span>Forks</span>
    </button>
</div>
<div class="btn-group btn-action-label" role="group" aria-label="Like">
    <button type="button" class="btn btn-sm btn-danger btn-action">
        <i class="fas fa-heart"></i>
        <span>Love</span>
    </button>
    <a href="#" class="btn btn-sm btn-outline-danger btn-label">1030</a>
</div>
<div class="btn-group btn-action-label" role="group" aria-label="Like">
    <a href="#" class="btn btn-sm btn-outline-danger btn-label">10000</a>
    <button type="button" class="btn btn-sm btn-danger btn-action">
        <i class="fas fa-heart"></i>
    </button>
</div>

Buttons with icon labels

<button type="button" class="btn btn-dark btn-icon-label">
    <span class="btn-inner--icon"><i class="fas fa-play"></i></span>
    <span class="btn-inner--text">Play now</span>
</button>
<button type="button" class="btn btn-secondary btn-icon-label">
    <span class="btn-inner--icon"><i class="fas fa-shopping-cart"></i></span>
    <span class="btn-inner--text">Add to cart</span>
</button>
<button type="button" class="btn btn-danger btn-icon-label">
    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
    <span class="btn-inner--text">Delete item</span>
</button>
<button type="button" class="btn btn-dark btn-icon-label">
    <span class="btn-inner--text">Play now</span>
    <span class="btn-inner--icon"><i class="fas fa-play"></i></span>
</button>
<button type="button" class="btn btn-secondary btn-icon-label">
    <span class="btn-inner--text">Add to cart</span>
    <span class="btn-inner--icon"><i class="fas fa-shopping-cart"></i></span>
</button>
<button type="button" class="btn btn-danger btn-icon-label">
    <span class="btn-inner--text">Delete item</span>
    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
</button>

Icon buttons

<button type="button" class="btn btn-sm btn-outline-primary btn-icon">
    <span class="btn-inner--text">Create account</span>
    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary btn-icon">
    <span class="btn-inner--text">Next step</span>
    <span class="btn-inner--icon"><i class="fas fa-arrow-right"></i></span>
</button>
<button type="button" class="btn btn-sm btn-outline-danger btn-icon">
    <span class="btn-inner--text">Deactivate</span>
    <span class="btn-inner--icon"><i class="fas fa-user-times"></i></span>
</button>
<button type="button" class="btn btn-primary btn-icon">
    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
    <span class="btn-inner--text">Create account</span>
</button>
<button type="button" class="btn btn-secondary btn-icon">
    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
    <span class="btn-inner--text">Previous step</span>
</button>
<button type="button" class="btn btn-danger btn-icon">
    <span class="btn-inner--icon"><i class="fas fa-user-times"></i></span>
    <span class="btn-inner--text">Deactivate</span>
</button>
<button type="button" class="btn btn-primary btn-icon-only">
    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
</button>
<button type="button" class="btn btn-secondary btn-icon-only">
    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
</button>
<button type="button" class="btn btn-danger btn-icon-only">
    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
</button>
<button type="button" class="btn btn-primary btn-icon-only rounded-circle">
    <span class="btn-inner--icon"><i class="fas fa-user"></i></span>
</button>
<button type="button" class="btn btn-secondary btn-icon-only btn-circle rounded-circle">
    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
</button>
<button type="button" class="btn btn-danger btn-icon-only rounded-circle">
    <span class="btn-inner--icon"><i class="fas fa-trash-alt"></i></span>
</button>

Toolbars

<div class="mb-5">
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Left</button>
        <button type="button" class="btn btn-secondary">Middle</button>
        <button type="button" class="btn btn-secondary">Right</button>
    </div>
</div>
<div class="mb-5">
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group mr-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-secondary"><i class="fas fa-align-left"></i></button>
            <button type="button" class="btn btn-secondary"><i class="fas fa-align-center"></i></button>
            <button type="button" class="btn btn-secondary active"><i class="fas fa-align-right"></i></button>
            <button type="button" class="btn btn-secondary"><i class="fas fa-align-justify"></i></button>
        </div>
        <div class="btn-group mr-2" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary"><i class="fas fa-bold"></i></button>
            <button type="button" class="btn btn-secondary"><i class="fas fa-italic"></i></button>
            <button type="button" class="btn btn-secondary"><i class="fas fa-underline"></i></button>
        </div>
        <div class="btn-group" role="group" aria-label="Third group">
            <button type="button" class="btn btn-secondary"><i class="fas fa-font"></i></button>
        </div>
    </div>
</div>

Colors

<div class="row">
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-primary">Primary</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-secondary">Secondary</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-dark">Dark</button>
    </div>
</div>
<div class="row mt-4">
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-danger">Danger</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-warning">Warning</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-success">Success</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-info">Info</button>
    </div>
</div>
<div class="row mt-4">
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-primary">Primary</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-secondary">Secondary</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-dark">Dark</button>
    </div>
</div>
<div class="row mt-4">
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-danger">Danger</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-warning">Warning</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-success">Success</button>
    </div>
    <div class="col-lg-3">
        <button type="button" class="btn btn-block btn-outline-info">Info</button>
    </div>
</div>

States

<button type="button" class="btn btn-sm btn-primary active px-5">Active</button>
<button type="button" class="btn btn-sm btn-secondary active px-5">Active</button>
<button type="button" class="btn btn-sm btn-primary px-5" disabled>Disabled</button>
<button type="button" class="btn btn-sm btn-secondary px-5" disabled>Disabled</button>
<button type="button" class="btn btn-sm btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Single toggle</button>
<button type="button" class="btn btn-sm btn-primary px-5"><i class="fas fa-spinner fa-spin"></i></button>
<button type="button" class="btn btn-sm btn-secondary px-5"><i class="fas fa-spinner fa-spin"></i></button>
<button type="button" class="btn btn-sm btn-primary px-5"><i class="fas fa-circle-notch fa-spin"></i></button>
<button type="button" class="btn btn-sm btn-secondary px-5"><i class="fas fa-circle-notch fa-spin"></i></button>

Sizing

<button class="btn btn-sm btn-secondary">Small size</button>
<button class="btn btn-secondary">Default size</button>
<button class="btn btn-lg btn-secondary">Large size</button>
<button class="btn btn-xl btn-secondary">Extra Large size</button>

Social buttons

<button type="button" class="btn btn-facebook btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-facebook"></i></span>
    <span class="btn-inner--text">Facebook</span>
</button>
<button type="button" class="btn btn-twitter btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-twitter"></i></span>
    <span class="btn-inner--text">Twitter</span>
</button>
<button type="button" class="btn btn-google-plus btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-google-plus-g"></i></span>
    <span class="btn-inner--text">Google +</span>
</button>
<button type="button" class="btn btn-instagram btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-instagram"></i></span>
    <span class="btn-inner--text">Instagram</span>
</button>
<button type="button" class="btn btn-pinterest btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-pinterest"></i></span>
    <span class="btn-inner--text">Pinterest</span>
</button>
<button type="button" class="btn btn-youtube btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-youtube"></i></span>
    <span class="btn-inner--text">Youtube</span>
</button>
<button type="button" class="btn btn-vimeo btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-vimeo-v"></i></span>
    <span class="btn-inner--text">Vimeo</span>
</button>
<button type="button" class="btn btn-slack btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-slack"></i></span>
    <span class="btn-inner--text">Slack</span>
</button>
<button type="button" class="btn btn-dribbble btn-icon-label">
    <span class="btn-inner--icon"><i class="fab fa-dribbble"></i></span>
    <span class="btn-inner--text">Dribbble</span>
</button>