Buttons

Buttons Shortcodes

Check out all the buttons options.


Default

Colors

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="row">
    <div class="col-md-6">
        <h4>Default</h4>
        <p>
            <button type="button" class="btn btn-default mr-xs mb-sm">Default</button>
            <button type="button" class="btn btn-success mr-xs mb-sm">Success</button>
            <button type="button" class="btn btn-info mr-xs mb-sm">Info</button>
            <button type="button" class="btn btn-warning mr-xs mb-sm">Warning</button>
            <button type="button" class="btn btn-danger mr-xs mb-sm">Danger</button>
        </p>
    </div>
    <div class="col-md-6">
        <h4>Colors</h4>
        <p>
            <button type="button" class="btn btn-primary mr-xs mb-sm">Primary</button>
            <button type="button" class="btn btn-secondary mr-xs mb-sm">Secondary</button>
            <button type="button" class="btn btn-tertiary mr-xs mb-sm">Tertiary</button>
            <button type="button" class="btn btn-quaternary mr-xs mb-sm">Quaternary</button>
        </p>
    </div>
</div>

Only Borders

3D Buttons

Javascript

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script>
    // Button Loading
    $('#loadingButton').on('click', function () {
        var $btn = $(this).button('loading')
        // Business Logic...

        setTimeout(function () {
            // Reset Button
            $btn.button('reset');
        }, 2000);
    })
</script>

Buttons Icons

Pagination

Large
Default
Small

Newsletter

Keep up on our always evolving product features and technology. Enter your e-mail and subscribe to our newsletter.

About Our Company

Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu nam sapien stibulum ridiculus pellentesque eros!

Get in touch

  • Address: 1234 Street, United States

  • Phone: (123) 456-7890

  • Email: mail@example.com