Button Shortcodes

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

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

<h4>Only Borders</h4>
<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>

<h4>3D Buttons</h4>
<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>

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

<h4>Pagination</h4>
<h5 class="text-semibold text-uppercase mb-none">Large</h5>
<ul class="pagination pagination-lg">
<li><a href="#"><i class="fa fa-chevron-left"></i></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="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>

<h5 class="text-semibold text-uppercase mb-none">Default</h5>
<ul class="pagination">
<li><a href="#"><i class="fa fa-chevron-left"></i></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="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>

<h5 class="text-semibold text-uppercase mb-none">Small</h5>
<ul class="pagination pagination-sm">
<li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
</ul>
										
									

										
/* Buttons */
.btn {
-webkit-transition: all 0.1s;
-moz-transition: all 0.1s;
transition: all 0.1s;
}
.btn-default {
color: #666;
}
.btn-icon i {
margin-right: 10px;
}
.btn-icon-right i {
margin-right: 0;
margin-left: 10px;
}
.btn-primary {
border-color: #CCC;
background-color: #CCC;
border-color: #CCC #CCC #b3b3b3;
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
border-color: #d9d9d9 #d9d9d9 #bfbfbf;
background-color: #d9d9d9;
color: #FFF;
}
.btn-primary:active, .btn-primary:focus {
border-color: #bfbfbf;
background-color: #bfbfbf;
color: #FFF;
}
.btn-primary.dropdown-toggle {
border-left-color: #bfbfbf;
}
.btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:active, .btn-primary[disabled]:focus {
border-color: white;
background-color: white;
color: #CCC;
}
.btn-success {
border-color: #47a447;
background-color: #47a447;
border-color: #47a447 #47a447 #388038;
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-success:hover {
border-color: #51b451 #51b451 #3f923f;
background-color: #51b451;
color: #FFF;
}
.btn-success:active, .btn-success:focus {
border-color: #3f923f;
background-color: #3f923f;
color: #FFF;
}
.btn-success.dropdown-toggle {
border-left-color: #3f923f;
}
.btn-success[disabled], .btn-success[disabled]:hover, .btn-success[disabled]:active, .btn-success[disabled]:focus {
border-color: #86cb86;
background-color: #86cb86;
color: #CCC;
}
.btn-warning {
border-color: #ed9c28;
background-color: #ed9c28;
border-color: #ed9c28 #ed9c28 #d18211;
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-warning:hover {
border-color: #efa740 #efa740 #e89113;
background-color: #efa740;
color: #FFF;
}
.btn-warning:active, .btn-warning:focus {
border-color: #e89113;
background-color: #e89113;
color: #FFF;
}
.btn-warning.dropdown-toggle {
border-left-color: #e89113;
}
.btn-warning[disabled], .btn-warning[disabled]:hover, .btn-warning[disabled]:active, .btn-warning[disabled]:focus {
border-color: #f5c786;
background-color: #f5c786;
color: #CCC;
}
.btn-danger {
border-color: #d2322d;
background-color: #d2322d;
border-color: #d2322d #d2322d #a82824;
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-danger:hover {
border-color: #d74742 #d74742 #bd2d29;
background-color: #d74742;
color: #FFF;
}
.btn-danger:active, .btn-danger:focus {
border-color: #bd2d29;
background-color: #bd2d29;
color: #FFF;
}
.btn-danger.dropdown-toggle {
border-left-color: #bd2d29;
}
.btn-danger[disabled], .btn-danger[disabled]:hover, .btn-danger[disabled]:active, .btn-danger[disabled]:focus {
border-color: #e48481;
background-color: #e48481;
color: #CCC;
}
.btn-info {
border-color: #5bc0de;
background-color: #5bc0de;
border-color: #5bc0de #5bc0de #31b0d5;
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-info:hover {
border-color: #70c8e2 #70c8e2 #46b8da;
background-color: #70c8e2;
color: #FFF;
}
.btn-info:active, .btn-info:focus {
border-color: #46b8da;
background-color: #46b8da;
color: #FFF;
}
.btn-info.dropdown-toggle {
border-left-color: #46b8da;
}
.btn-info[disabled], .btn-info[disabled]:hover, .btn-info[disabled]:active, .btn-info[disabled]:focus {
border-color: #b0e1ef;
background-color: #b0e1ef;
color: #CCC;
}
.btn-dark {
border-color: #1d2127;
background-color: #1d2127;
border-color: #1d2127 #1d2127 #07080a;
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn-dark:hover {
border-color: #282d36 #282d36 #121518;
background-color: #282d36;
color: #FFF;
}
.btn-dark:active, .btn-dark:focus {
border-color: #121518;
background-color: #121518;
color: #FFF;
}
.btn-dark.dropdown-toggle {
border-left-color: #121518;
}
.btn-dark[disabled], .btn-dark[disabled]:hover, .btn-dark[disabled]:active, .btn-dark[disabled]:focus {
border-color: #495362;
background-color: #495362;
color: #CCC;
}

/* Border Buttons */
.btn-borders {
border-width: 3px;
}
.btn-borders.btn-primary {
background: transparent;
border-color: #CCC;
color: #CCC;
text-shadow: none;
}
.btn-borders.btn-primary:hover, .btn-borders.btn-primary:focus {
background-color: #d9d9d9;
border-color: #CCC !important;
color: #FFF;
}
.btn-borders.btn-success {
background: transparent;
border-color: #47a447;
color: #47a447;
text-shadow: none;
}
.btn-borders.btn-success:hover, .btn-borders.btn-success:focus {
background-color: #51b451;
border-color: #47a447 !important;
color: #FFF;
}
.btn-borders.btn-warning {
background: transparent;
border-color: #ed9c28;
color: #ed9c28;
text-shadow: none;
}
.btn-borders.btn-warning:hover, .btn-borders.btn-warning:focus {
background-color: #efa740;
border-color: #ed9c28 !important;
color: #FFF;
}
.btn-borders.btn-danger {
background: transparent;
border-color: #d2322d;
color: #d2322d;
text-shadow: none;
}
.btn-borders.btn-danger:hover, .btn-borders.btn-danger:focus {
background-color: #d74742;
border-color: #d2322d !important;
color: #FFF;
}
.btn-borders.btn-info {
background: transparent;
border-color: #5bc0de;
color: #5bc0de;
text-shadow: none;
}
.btn-borders.btn-info:hover, .btn-borders.btn-info:focus {
background-color: #70c8e2;
border-color: #5bc0de !important;
color: #FFF;
}
.btn-borders.btn-dark {
background: transparent;
border-color: #1d2127;
color: #1d2127;
text-shadow: none;
}
.btn-borders.btn-dark:hover, .btn-borders.btn-dark:focus {
background-color: #282d36;
border-color: #1d2127 !important;
color: #FFF;
}

/* Border Buttons - Sizes */
.btn-borders {
padding: 4px 12px;
}
.btn-borders.btn-lg, .btn-group-lg > .btn-borders.btn {
padding: 8px 16px;
}
.btn-borders.btn-sm, .btn-group-sm > .btn-borders.btn {
border-width: 2px;
padding: 4px 10px;
}
.btn-borders.btn-xs, .btn-group-xs > .btn-borders.btn {
padding: 1px 5px;
border-width: 1px;
}

/* 3D Buttons */
.btn-3d {
border-bottom-width: 3px;
padding: 5px 12px;
border-radius: 6px;
}
.btn-3d.btn-lg, .btn-group-lg > .btn-3d.btn {
padding: 9px 16px;
}
.btn-3d.btn-sm, .btn-group-sm > .btn-3d.btn {
border-width: 2px;
padding: 4px 10px;
}
.btn-3d.btn-xs, .btn-group-xs > .btn-3d.btn {
padding: 1px 5px;
border-width: 1px;
}

/* Pagination */
.pagination {
position: relative;
z-index: 1;
}
.pagination > li > a,
.pagination > li > span,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
color: #CCC;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
background-color: #CCC;
border-color: #CCC;
}