Buttons

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

Bootstrap Documentation

Examples

Default

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

<button type="button" class="btn btn-link">Link</button>

Tags

Link 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Soft

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<button type="button" class="btn btn-soft-primary">
    Primary
</button>
<button type="button" class="btn btn-soft-secondary">
    Secondary
</button>
<button type="button" class="btn btn-soft-success">
    Success
</button>
<button type="button" class="btn btn-soft-danger">
    Danger
</button>
<button type="button" class="btn btn-soft-warning">
    Warning
</button>
<button type="button" class="btn btn-soft-info">
    Info
</button>
<button type="button" class="btn btn-soft-dark">
    Dark
</button>

Outline

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

<button type="button" class="btn btn-outline-primary">
    Primary
</button>
<button type="button" class="btn btn-outline-secondary">
    Secondary
</button>
<button type="button" class="btn btn-outline-success">
    Success
</button>
<button type="button" class="btn btn-outline-danger">
    Danger
</button>
<button type="button" class="btn btn-outline-warning">
    Warning
</button>
<button type="button" class="btn btn-outline-info">
    Info
</button>
<button type="button" class="btn btn-outline-dark">
    Dark
</button>

Brand

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

App

<button type="button" class="btn btn-app-store">
    <i class="fab fa-apple"></i>
    <span class="btn-inner--text">Download on the</span>
    <span class="btn-inner--brand">App Store</span>
</button>
<button type="button" class="btn btn-app-store">
    <i class="fab fa-google-play"></i>
    <span class="btn-inner--text">Download on the</span>
    <span class="btn-inner--brand">Play Store</span>
</button>

Icon

Simple

<button type="button" class="btn btn-primary btn-icon-only">
    <span class="btn-inner--icon">
        <i class="far fa-user"></i>
    </span>
</button>
<button type="button" class="btn btn-secondary btn-icon-only">
    <span class="btn-inner--icon">
        <i class="far fa-arrow-left"></i>
    </span>
</button>
<button type="button" class="btn btn-danger btn-icon-only">
    <span class="btn-inner--icon">
        <i class="far fa-trash-alt"></i>
    </span>
</button>
<button type="button" class="btn btn-primary rounded-circle btn-icon-only">
    <span class="btn-inner--icon">
        <i class="far fa-user"></i>
    </span>
</button>
<button type="button" class="btn btn-secondary rounded-circle btn-icon-only">
    <span class="btn-inner--icon">
        <i class="far fa-arrow-left"></i>
    </span>
</button>
<button type="button" class="btn btn-danger rounded-circle btn-icon-only">
    <span class="btn-inner--icon">
        <i class="far fa-trash-alt"></i>
    </span>
</button>

Text

<button type="button" class="btn btn-primary btn-icon">
    <span class="btn-inner--icon">
        <i class="far fa-user"></i>
    </span>
    <span class="btn-inner--text">Create account</span>
</button>
<button type="button" class="btn btn-danger btn-icon">
    <span class="btn-inner--icon">
        <i class="far fa-user-times"></i>
    </span>
    <span class="btn-inner--text">Deactivate</span>
</button>
<button type="button" class="btn btn-primary btn-icon">
    <span class="btn-inner--text">Create account</span><span class="btn-inner--icon">
        <i class="far fa-user"></i>
    </span>
</button>
<button type="button" class="btn btn-danger btn-icon">
    <span class="btn-inner--text">Deactivate</span><span class="btn-inner--icon">
        <i class="far fa-user-times"></i>
    </span>
</button>

Label

<button type="button" class="btn btn-primary btn-icon-label">
    <span class="btn-inner--icon">
        <i class="far fa-play"></i>
    </span>
    <span class="btn-inner--text">Play now</span>
</button>
<button type="button" class="btn btn-dark btn-icon-label">
    <span class="btn-inner--icon">
        <i class="far 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="far fa-trash-alt"></i>
    </span>
    <span class="btn-inner--text">Delete item</span>
</button>
<button type="button" class="btn btn-primary btn-icon-label">
    <span class="btn-inner--text">Play now</span><span class="btn-inner--icon">
        <i class="far fa-play"></i>
    </span>
</button>
<button type="button" class="btn btn-dark btn-icon-label">
    <span class="btn-inner--text">Add to cart</span><span class="btn-inner--icon">
        <i class="far 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="far fa-trash-alt"></i>
    </span>
</button>

Animated

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

Options

Shapes

<button type="button" class="btn btn-primary">
    Rounded
</button>
<button type="button" class="btn btn-primary rounded-0">
    Square
</button>
<button type="button" class="btn btn-primary rounded-pill">
    Pill
</button>

Sizing

<button type="button" class="btn btn-primary btn-sm">
    Small
</button>
<button type="button" class="btn btn-primary">
    Default
</button>
<button type="button" class="btn btn-primary btn-lg">
    Large
</button>
<button type="button" class="btn btn-primary btn-xl">
    Extra large
</button>

Animations

<button type="button" class="btn btn-primary hover-scale-110">
    zoom
</button>
<button type="button" class="btn btn-primary hover-translate-y-n3">
    translateY
</button>

States

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