Default Pink Blue Green Yellow Red Lime Navy
Cream MidNight Brown Teal Pelorous Sky Blue
1 2 3 4 5 6 7 8 9 10 11 12 13 14
<button type="button" class="btn btn-default w-brd mr-sm mb-sm"><em class="fas fa-star"></em> Default</button> <button type="button" class="btn btn-pink color_pink w-brd mr-sm mb-sm"><em class="fas fa-cloud"></em> Pink</button> <button type="button" class="btn btn-blue color_blue w-brd mr-sm mb-sm"><em class="fas fa-leaf"></em> Blue</button> <button type="button" class="btn btn-green color_green w-brd mr-sm mb-sm"><em class="fas fa-sun"></em> Green</button> <button type="button" class="btn btn-yellow color_yellow w-brd mr-sm mb-sm"><em class="fas fa-glass-martini"></em> Yellow</button> <button type="button" class="btn btn-red color_red w-brd mr-sm mb-sm"><em class="fas fa-fire"></em> Red</button> <button type="button" class="btn btn-lime color_lime w-brd mr-sm mb-sm"><em class="fas fa-asterisk"></em> Lime</button> <button type="button" class="btn btn-navy color_navy w-brd mr-sm mb-sm"><em class="fas fa-anchor"></em> Navy</button> <button type="button" class="btn btn-cream color_cream w-brd mr-sm mb-sm"><em class="fas fa-gift"></em> Cream</button> <button type="button" class="btn btn-midnight color_midnight w-brd mr-sm mb-sm"><em class="fas fa-moon"></em> MidNight</button> <button type="button" class="btn btn-brown color_brown w-brd mr-sm mb-sm"><em class="fas fa-coffee"></em> Brown</button> <button type="button" class="btn btn-teal color_teal w-brd mr-sm mb-sm"><em class="fas fa-globe"></em> Teal</button> <button type="button" class="btn btn-pelorous color_pelorous w-brd mr-sm mb-sm"><em class="fas fa-tree"></em> Pelorous</button> <button type="button" class="btn btn-skyblue color_skyblue w-brd mr-sm mb-sm"><em class="fas fa-skyatlas"></em> Sky Blue</button>
Cream MidNight Brown Teal Pelorous Sky Blue Light
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<p class="text-center"> <button type="button" class="btn btn-borders btn-default mr-sm mb-sm"><em class="fas fa-star"></em> Default</button> <button type="button" class="btn btn-pink color_pink style_outlined mr-sm mb-sm"><em class="fas fa-cloud"></em> Pink</button> <button type="button" class="btn btn-blue color_blue style_outlined mr-sm mb-sm"><em class="fas fa-leaf"></em> Blue</button> <button type="button" class="btn btn-green color_green style_outlined mr-sm mb-sm"><em class="fas fa-sun"></em> Green</button> <button type="button" class="btn btn-yellow color_yellow style_outlined mr-sm mb-sm"><em class="fas fa-glass-martini"></em> Yellow</button> <button type="button" class="btn btn-red color_red style_outlined mr-sm mb-sm"><em class="fas fa-fire"></em> Red</button> <button type="button" class="btn btn-lime color_lime style_outlined mr-sm mb-sm"><em class="fas fa-asterisk"></em> Lime</button> <button type="button" class="btn btn-navy color_navy style_outlined mr-sm mb-sm"><em class="fas fa-anchor"></em> Navy</button> </p> <p class="text-center"> <button type="button" class="btn btn-cream color_cream style_outlined mr-sm mb-sm"><em class="fas fa-gift"></em> Cream</button> <button type="button" class="btn btn-midnight color_midnight style_outlined mr-sm mb-sm"><em class="fas fa-moon"></em> MidNight</button> <button type="button" class="btn btn-brown color_brown style_outlined mr-sm mb-sm"><em class="fas fa-coffee"></em> Brown</button> <button type="button" class="btn btn-teal color_teal style_outlined mr-sm mb-sm"><em class="fas fa-globe"></em> Teal</button> <button type="button" class="btn btn-pelorous color_pelorous style_outlined mr-sm mb-sm"><em class="fas fa-tree"></em> Pelorous</button> <button type="button" class="btn btn-skyblue color_skyblue style_outlined mr-sm mb-sm"><em class="fab fa-skyatlas"></em> Sky Blue</button> <button type="button" class="btn btn-white color_white style_outlined mr-sm mb-sm"><em class="fas fa-certificate"></em> Light</button> </p>
Primary Secondary Tertiary Quaternary
1 2 3 4
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm"><em class="fas fa-star"></em> Primary</button> <button type="button" class="btn btn-secondary w-brd mr-xs mb-sm"><em class="fas fa-arrow-down"></em> Secondary</button> <button type="button" class="btn btn-tertiary w-brd mr-xs mb-sm"><em class="fas fa-chevron-right"></em> Tertiary</button> <button type="button" class="btn btn-quaternary w-brd mr-xs mb-sm">Quaternary <em class="fas fa-cog"></em></button>
<button type="button" class="btn btn-borders btn-primary mr-xs mb-sm"><em class="fas fa-star"></em> Primary</button> <button type="button" class="btn btn-borders btn-secondary mr-xs mb-sm"><em class="fas fa-arrow-down"></em> Secondary</button> <button type="button" class="btn btn-borders btn-tertiary mr-xs mb-sm"><em class="fas fa-chevron-right"></em> Tertiary</button> <button type="button" class="btn btn-borders btn-quaternary mr-xs mb-sm">Quaternary <em class="fas fa-cog"></em></button>
DefaultPrimarySecondaryTertiaryQuaternarySuccessInfoWarningDanger
1 2 3 4 5 6 7 8 9
<button class="btn btn-3d btn-default mr-xs mb-sm" type="button">Default</button> <button class="btn btn-3d btn-primary mr-xs mb-sm" type="button">Primary</button> <button class="btn btn-3d btn-secondary mr-xs mb-sm" type="button">Secondary</button> <button class="btn btn-3d btn-tertiary mr-xs mb-sm" type="button">Tertiary</button> <button class="btn btn-3d btn-quaternary mr-xs mb-sm" type="button">Quaternary</button> <button class="btn btn-3d btn-success mr-xs mb-sm" type="button">Success</button> <button class="btn btn-3d btn-info mr-xs mb-sm" type="button">Info</button> <button class="btn btn-3d btn-warning mr-xs mb-sm" type="button">Warning</button> <button class="btn btn-3d btn-danger mr-xs mb-sm" type="button">Danger</button>
SMALL TRANSPARENT MEDIUM TRANSPARENT LARGE TRANSPARENT
1 2 3
<button type="button" class="color_transparent clr-primary w-brd btn-sm mr-sm mb-sm"><em class="fas fa-star"></em> SMALL TRANSPARENT</button> <button type="button" class="color_transparent clr-primary w-brd mr-sm mb-sm"><em class="fas fa-cloud"></em> MEDIUM TRANSPARENT</button> <button type="button" class="color_transparent clr-primary w-brd btn-lg mr-sm mb-sm"><em class="fas fa-cloud"></em> LARGE TRANSPARENT</button>
Solid Button Outline Button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xs text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xs text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-sm text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-sm text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-md text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-md text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-lg text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-lg text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xl text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xl text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xlg text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xlg text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button> <button type="button" class="btn btn-primary w-brd mr-xs mb-sm btn-xxl text-uppercase"><em class="fas fa-cloud"></em> Solid Button</button> <button type="button" class="btn btn-borders btn-primary mr-xs mb-sm btn-xxl text-uppercase"><em class="fas fa-cloud"></em> Outline Button</button>
Click Here!
<button type="button" id="loadingButton" data-loading-text="Loading..." class="btn btn-primary"> Click Here! </button>
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>
Refresh Cloud
<button type="button" class="mb-xs mt-xs mr-xs btn btn-default"><em class="fas fa-refresh"></em> Refresh</button> <button type="button" class="mb-xs mt-xs mr-xs btn btn-primary"><em class="fas fa-cloud"></em> Cloud</button> <button type="button" class="mb-xs mt-xs mr-xs btn btn-info"><em class="fas fa-thumbs-up"></em> </button> <button type="button" class="mb-xs mt-xs mr-xs btn btn-borders btn-info"><em class="fas fa-thumbs-up"></em> </button>
<ul class="pagination pagination-lg"> <li><a href="#"><em class="fas 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="fas fa-chevron-right"></em></a></li> </ul>
1 2 3 4 5 6 7 8
<ul class="pagination"> <li><a href="#"><em class="fas 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="fas fa-chevron-right"></em></a></li> </ul>
1 2 3 4 5 6
<ul class="pagination pagination-sm"> <li><a href="#"><em class="fas 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="fas fa-chevron-right"></em></a></li> </ul>
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>