## Buttons

We have styled all Bootstrap elements just as you want!

Toggle Code!

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

Checkbox 1 (pre-checked) Checkbox 2 Checkbox 3

    <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

Radio 1 (preselected) Radio 2 Radio 3

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