Buttons

We have styled all Bootstrap elements just as you want!

Default Buttons

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>
                                                    
Rounded Buttons

<!-- Add class btn-rounded to any button to make it round -->
<button type="button" class="btn btn-default btn-rounded">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-rounded">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-rounded">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-rounded">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-rounded">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
                                                    
Wide Buttons

<!-- Add class btn-wide to any button to make it wider -->
<button type="button" class="btn btn-default btn-wide">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-wide">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-wide">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-wide">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-wide">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-wide">Danger</button>
                                                    
Wide + Rounded Buttons

<!-- Add class btn-wide to any button to make it wider -->
<button type="button" class="btn btn-default btn-rounded btn-wide">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-rounded btn-wide">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-rounded btn-wide">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-rounded btn-wide">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-rounded btn-wide">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-rounded btn-wide">Danger</button>
                                                    
Bordered Buttons

<button type="button" class="btn btn-default border-gray-600 btn-wide">Default</button>

<button type="button" class="btn btn-default border-primary btn-wide">Primary</button>

<button type="button" class="btn btn-default border-success btn-wide">Success</button>

<button type="button" class="btn btn-default border-info btn-wide">Info</button>

<button type="button" class="btn btn-default border-warning btn-wide">Warning</button>

<button type="button" class="btn btn-default border-danger btn-wide">Danger</button>
                                                    
Wide + Rounded + Bordered Buttons

<button type="button" class="btn btn-default border-default btn-rounded btn-wide">Default</button>

<button type="button" class="btn btn-default border-primary btn-rounded btn-wide">Primary</button>

<button type="button" class="btn btn-default border-success btn-rounded btn-wide">Success</button>

<button type="button" class="btn btn-default border-info btn-rounded btn-wide">Info</button>

<button type="button" class="btn btn-default border-warning btn-rounded btn-wide">Warning</button>

<button type="button" class="btn btn-default border-danger btn-rounded btn-wide">Danger</button>
                                                    
Buttons with Icon

<button type="button" class="btn btn-default"><i class="fa fa-send-o"></i>Send</button>

<button type="button" class="btn btn-primary "><i class="fa fa-send-o"></i>Send</button>

<button type="button" class="btn btn-black"><i class="fa fa-cog"></i>Settings</button>

<button type="button" class="btn btn-danger"><i class="fa fa-sign-out"></i>Logout</button>

<button type="button" class="btn btn-success"><i class="fa fa-check"></i>Submit</button>

<button type="button" class="btn btn-warning"><i class="fa fa-exclamation-circle"></i>Warning</button>
                                                    
Wide + Rounded + Icon Buttons

<button type="button" class="btn btn-default btn-rounded btn-wide"><i class="fa fa-send-o"></i>Send</button>

<button type="button" class="btn btn-black btn-rounded btn-wide"><i class="fa fa-cog"></i>Settings</button>

<button type="button" class="btn btn-danger btn-rounded btn-wide"><i class="fa fa-sign-out"></i>Logout</button>

<button type="button" class="btn btn-success btn-rounded btn-wide"><i class="fa fa-check"></i>Submit</button>

<button type="button" class="btn btn-warning btn-rounded btn-wide"><i class="fa fa-exclamation-circle"></i>Warning</button>
                                                    
Buttons Labeled

<button type="button" class="btn btn-default btn-labeled"><span class="btn-label"><i class="fa fa-send-o"></i></span>Send</button>

<button type="button" class="btn btn-primary btn-labeled"><span class="btn-label"><i class="fa fa-send-o"></i></span>Send</button>

<button type="button" class="btn btn-danger btn-labeled">Logout<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-success btn-labeled">Submit<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>

<button type="button" class="btn btn-warning btn-labeled">Warning<span class="btn-label btn-label-right"><i class="fa fa-exclamation-circle"></i></span></button>
                                                    
Rounded Labeled Buttons

<button type="button" class="btn btn-default btn-rounded btn-wide"><i class="fa fa-send-o"></i>Send</button>

<button type="button" class="btn btn-black btn-rounded btn-wide"><i class="fa fa-cog"></i>Settings</button>

<button type="button" class="btn btn-danger btn-rounded btn-wide"><i class="fa fa-sign-out"></i>Logout</button>

<button type="button" class="btn btn-success btn-rounded btn-wide"><i class="fa fa-check"></i>Submit</button>

<button type="button" class="btn btn-warning btn-rounded btn-wide"><i class="fa fa-exclamation-circle"></i>Warning</button>
                                                    
Animated Buttons

<button type="button" class="btn btn-default btn-animated btn-wide"><span class="visible-content">Send</span><span class="hidden-content"><i class="fa fa-send-o"></i></span></button>

<button type="button" class="btn btn-primary btn-animated btn-wide"><span class="visible-content">Send</span><span class="hidden-content"><i class="fa fa-send-o"></i></span></button>

<button type="button" class="btn btn-danger btn-animated btn-wide"><span class="visible-content">Logout</span><span class="hidden-content"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-success btn-animated btn-wide"><span class="visible-content">Submit</span><span class="hidden-content"><i class="fa fa-check"></i></span></button>

<button type="button" class="btn btn-black btn-animated btn-wide"><span class="visible-content">Settings</span><span class="hidden-content"><i class="fa fa-cog"></i></span></button>
                                                    
Animated + Rounded Buttons

<button type="button" class="btn btn-default btn-animated btn-wide btn-rounded"><span class="visible-content">Send</span><span class="hidden-content"><i class="fa fa-send-o"></i></span></button>

<button type="button" class="btn btn-primary btn-animated btn-wide btn-rounded"><span class="visible-content">Send</span><span class="hidden-content"><i class="fa fa-send-o"></i></span></button>

<button type="button" class="btn btn-danger btn-animated btn-wide btn-rounded"><span class="visible-content">Logout</span><span class="hidden-content"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-success btn-animated btn-wide btn-rounded"><span class="visible-content">Submit</span><span class="hidden-content"><i class="fa fa-check"></i></span></button>

<button type="button" class="btn btn-black btn-animated btn-wide btn-rounded"><span class="visible-content">Settings</span><span class="hidden-content"><i class="fa fa-cog"></i></span></button>
                                                    
Buttons with Loading Animations Click on below buttons

<button type="button" class="btn btn-gray ladda-button" data-style="expand-left" data-spinner-color="#222"><span class="ladda-label">Expand Left</span></button>

<button type="button" class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">Expand Right</span></button>

<button type="button" class="btn btn-success ladda-button" data-style="zoom-in"><span class="ladda-label">Zoom In</span></button>

<button type="button" class="btn btn-black ladda-button" data-style="zoom-out"><span class="ladda-label">Zoom Out</span></button>

<button type="button" class="btn btn-warning ladda-button" data-style="slide-up"><span class="ladda-label">Slide Up</span></button>

<button type="button" class="btn btn-danger ladda-button" data-style="slide-down"><span class="ladda-label">Slide Down</span></button>
                                                    
Rounded Buttons with Loading Animation

<button type="button" class="btn btn-gray btn-rounded ladda-button" data-style="expand-left" data-spinner-color="#222"><span class="ladda-label">Expand Left</span></button>

<button type="button" class="btn btn-primary btn-rounded ladda-button" data-style="expand-right"><span class="ladda-label">Expand Right</span></button>

<button type="button" class="btn btn-success btn-rounded ladda-button" data-style="zoom-in"><span class="ladda-label">Zoom In</span></button>

<button type="button" class="btn btn-black btn-rounded ladda-button" data-style="zoom-out"><span class="ladda-label">Zoom Out</span></button>

<button type="button" class="btn btn-warning btn-rounded ladda-button" data-style="slide-up"><span class="ladda-label">Slide Up</span></button>

<button type="button" class="btn btn-danger btn-rounded ladda-button" data-style="slide-down"><span class="ladda-label">Slide Down</span></button>
                                                    
Icon only buttons

<button type="button" class="btn btn-default icon-only"><i class="fa fa-check"></i></button>

<button type="button" class="btn btn-primary icon-only"><i class="fa fa-bars"></i></button>

<button type="button" class="btn btn-success icon-only"><i class="fa fa-pencil"></i></button>

<button type="button" class="btn btn-black icon-only"><i class="fa fa-thumbs-o-up"></i></button>

<button type="button" class="btn btn-danger icon-only"><i class="fa fa-trash-o"></i></button>

<button type="button" class="btn btn-warning icon-only"><i class="fa fa-exclamation-triangle"></i></button>
                                                    
Icon only Rounded Buttons

<button type="button" class="btn btn-default btn-rounded icon-only"><i class="fa fa-check"></i></button>

<button type="button" class="btn btn-primary btn-rounded icon-only"><i class="fa fa-bars"></i></button>

<button type="button" class="btn btn-success btn-rounded icon-only"><i class="fa fa-pencil"></i></button>

<button type="button" class="btn btn-black btn-rounded icon-only"><i class="fa fa-thumbs-o-up"></i></button>

<button type="button" class="btn btn-danger btn-rounded icon-only"><i class="fa fa-trash-o"></i></button>

<button type="button" class="btn btn-warning btn-rounded icon-only"><i class="fa fa-exclamation-triangle"></i></button>
                                                    
Button Dropdowns

<!-- For Single Dropdown button -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Default <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<!-- For Dropdown Background -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Primary Dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu bg-primary">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
                                                    
Dropdown Buttons - Rounded

<!-- For Single Dropdown button -->
<div class="btn-group">
    <button type="button" class="btn btn-default btn-rounded dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Default <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
<!-- For Dropdown Background -->
<div class="btn-group">
    <button type="button" class="btn btn-default btn-rounded dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Danger Background <span class="caret"></span>
    </button>
    <ul class="dropdown-menu bg-danger">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
                                                    
Split Button Dropdowns

<!-- For Single Dropdown button -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Default <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
                                                    
Dropdown Buttons - Rounded

<!-- For Single Dropdown button -->
<div class="btn-group">
    <button type="button" class="btn btn-default btn-rounded dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Default <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>
                                                    
Button Groups


<div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>
<!-- /.btn-group -->

<div class="btn-group" role="group">
    <button type="reset" class="btn btn-gray btn-wide"><i class="fa fa-times"></i>Cancel</button>
    <button type="button" class="btn bg-success btn-wide"><i class="fa fa-check"></i>Save</button>
    <button type="button" class="btn bg-black btn-wide"><i class="fa fa-arrow-right"></i>Save & Next</button>
</div>
<!-- /.btn-group -->
                                                    
Button Toolbar

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-default">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-default">8</button>
    </div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary icon-only"><i class="fa fa-align-left"></i></button>
        <button type="button" class="btn btn-primary icon-only"><i class="fa fa-align-right"></i></button>
        <button type="button" class="btn btn-primary icon-only"><i class="fa fa-align-center"></i></button>
        <button type="button" class="btn btn-primary icon-only"><i class="fa fa-align-justify"></i></button>
    </div>
    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-danger icon-only"><i class="fa fa-cut"></i></button>
        <button type="button" class="btn btn-danger icon-only"><i class="fa fa-copy"></i></button>
        <button type="button" class="btn btn-danger icon-only"><i class="fa fa-paste"></i></button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-black icon-only"><i class="fa fa-chain"></i></button>
    </div>
</div>
                                                    
Checkbox Button Group

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" checked> Checkbox 1 (pre-checked)
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> Checkbox 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> Checkbox 3
    </label>
</div>
                                                    
Radio Button Group

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="radio" name="options" id="option1" checked> Radio 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Radio 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Radio 3
    </label>
</div>
                                                    
Sizes

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

<button type="button" class="btn btn-default">Default Button</button>

<button type="button" class="btn btn-danger btn-sm">Small Button</button>

<button type="button" class="btn btn-gray btn-xs">Extra Small Button</button>
                                                    
Rounded Buttons - Sizes

<button type="button" class="btn btn-primary btn-lg btn-rounded">Large Button</button>

<button type="button" class="btn btn-default btn-rounded">Default Button</button>

<button type="button" class="btn btn-danger btn-sm btn-rounded">Small Button</button>

<button type="button" class="btn btn-gray btn-xs btn-rounded">Extra Small Button</button>
                                                    
Labeled Buttons - Sizes

<button type="button" class="btn btn-primary btn-lg btn-labeled">Large Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-default btn-labeled">Default Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-danger btn-sm btn-labeled">Small Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-gray btn-xs btn-labeled">Extra Small Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>
                                                    
Labeled Rounded Buttons - Sizes

<button type="button" class="btn btn-primary btn-lg btn-labeled btn-rounded">Large Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-default btn-labeled btn-rounded">Default Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-danger btn-sm btn-labeled btn-rounded">Small Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>

<button type="button" class="btn btn-gray btn-xs btn-labeled btn-rounded">Extra Small Button<span class="btn-label btn-label-right"><i class="fa fa-sign-out"></i></span></button>
                                                    
Block Level Buttons

<button type="button" class="btn btn-primary btn-lg btn-block"><i class="fa fa-bars"></i> Block level button</button>
                                                    
Block Level Buttons - Rounded

<button type="button" class="btn btn-primary btn-lg btn-rounded btn-block"><i class="fa fa-bars"></i> Block level button</button>