Search
Menu
  1. Welcome
Search

About Our Company

Call Centers 24x7® is a premier US-based customer service and tech support call center, also offering fulfillment services, software and customization of software including hosted CRM and phone systems. Based in Port Angeles, Washington State. Since 2002.

Get in touch

Follow Us

Shortcodes

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

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
<p>
    <button type="button" class="btn btn-borders btn-default mr-xs mb-sm">Default</button>
    <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm">Primary</button>
    <button type="button" class="btn btn-borders btn-secondary mr-xs mb-sm">Secondary</button>
    <button type="button" class="btn btn-borders btn-tertiary mr-xs mb-sm">Tertiary</button>
    <button type="button" class="btn btn-borders btn-quaternary mr-xs mb-sm">Quaternary</button>
    <button type="button" class="btn btn-borders btn-success mr-xs mb-sm">Success</button>
    <button type="button" class="btn btn-borders btn-info mr-xs mb-sm">Info</button>
    <button type="button" class="btn btn-borders btn-warning mr-xs mb-sm">Warning</button>
    <button type="button" class="btn btn-borders btn-danger mr-xs mb-sm">Danger</button>
</p>

3D Buttons

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 
<p>
    <button type="button" class="btn btn-3d btn-default mr-xs mb-sm">Default</button>
    <button type="button" class="btn btn-3d btn-primary mr-xs mb-sm">Primary</button>
    <button type="button" class="btn btn-3d btn-secondary mr-xs mb-sm">Secondary</button>
    <button type="button" class="btn btn-3d btn-tertiary mr-xs mb-sm">Tertiary</button>
    <button type="button" class="btn btn-3d btn-quaternary mr-xs mb-sm">Quaternary</button>
    <button type="button" class="btn btn-3d btn-success mr-xs mb-sm">Success</button>
    <button type="button" class="btn btn-3d btn-info mr-xs mb-sm">Info</button>
    <button type="button" class="btn btn-3d btn-warning mr-xs mb-sm">Warning</button>
    <button type="button" class="btn btn-3d btn-danger mr-xs mb-sm">Danger</button>
</p>

Buttons Sizes

Loading


HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<div class="row">
    <div class="col-md-6">
        <h4>Buttons Sizes</h4>
        <p>
            <button type="button" class="btn btn-primary btn-lg">Large Size</button>
            <button type="button" class="btn btn-borders btn-primary btn-lg">Large Size</button>
            <button type="button" class="btn btn-3d btn-primary btn-lg">Large Size</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary">Default Size</button>
            <button type="button" class="btn btn-borders btn-primary">Default Size</button>
            <button type="button" class="btn btn-3d btn-primary">Default Size</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-sm">Small Size</button>
            <button type="button" class="btn btn-borders btn-primary btn-sm">Small Size</button>
            <button type="button" class="btn btn-3d btn-primary btn-sm">Small Size</button>
        </p>
        <p>
            <button type="button" class="btn btn-primary btn-xs">Extra Small Size</button>
            <button type="button" class="btn btn-borders btn-primary btn-xs">Extra Small Size</button>
            <button type="button" class="btn btn-3d btn-primary btn-xs">Extra Small Size</button>
        </p>
    </div>
    <div class="col-md-6">
        <h4>Loading</h4>
        <p>
            <button type="button" id="loadingButton" data-loading-text="Loading..." class="btn btn-primary">
                Click Here!
            </button>
            <!-- Check JS at the bottom to see how it works. -->
        </p>
    </div>
</div>

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

HTML Shortcode 

1
2
3
4
5
6
 
<p>
    <button type="button" class="mb-xs mt-xs mr-xs btn btn-default"><em class="fa fa-refresh"></em> Refresh</button>
    <button type="button" class="mb-xs mt-xs mr-xs btn btn-primary"><em class="fa fa-cloud"></em> Cloud</button>
    <button type="button" class="mb-xs mt-xs mr-xs btn btn-info"><em class="fa fa-thumbs-up"></em> </button>
    <button type="button" class="mb-xs mt-xs mr-xs btn btn-borders btn-info"><em class="fa fa-thumbs-up"></em> </button>
</p>

Pagination

Large
Default
Small

HTML Shortcode 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<div class="row">
    <div class="col-md-5">
        <h5 class="text-semibold text-uppercase mb-none">Large</h5>
        <ul class="pagination pagination-lg">
            <li><a href="#"><em class="fa fa-chevron-left"></em></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#"><em class="fa fa-chevron-right"></em></a></li>
        </ul>
    </div>
    <div class="col-md-4">
        <h5 class="text-semibold text-uppercase mb-none">Default</h5>
        <ul class="pagination">
            <li><a href="#"><em class="fa fa-chevron-left"></em></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#"><em class="fa fa-chevron-right"></em></a></li>
        </ul>
    </div>
    <div class="col-md-3">
        <h5 class="text-semibold text-uppercase mb-none">Small</h5>
        <ul class="pagination pagination-sm">
            <li><a href="#"><em class="fa fa-chevron-left"></em></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#"><em class="fa fa-chevron-right"></em></a></li>
        </ul>
    </div>
</div>
Copyright 2026 by Call Centers 24x7 Terms Of Use Privacy Statement
Back To Top