• مثال ها / Shortcodes 2 / Buttons

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

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>