<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="card">
<div class="card-body">
<h2>Buttons</h2>
<hr>
<div class="row">
<div class="col-xs-12 text-center">
<div class="logo">
<div class="inner"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Standard buttons</h3>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Sharp buttons</h3>
<button type="button" class="btn btn-primary sharp">Primary</button>
<button type="button" class="btn btn-success sharp">Success</button>
<button type="button" class="btn btn-info sharp">Info</button>
<button type="button" class="btn btn-warning sharp">Warning</button>
<button type="button" class="btn btn-danger sharp">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Outline buttons</h3>
<button type="button" class="btn btn-primary outline">Primary</button>
<button type="button" class="btn btn-success outline">Success</button>
<button type="button" class="btn btn-info outline">Info</button>
<button type="button" class="btn btn-warning outline">Warning</button>
<button type="button" class="btn btn-danger outline">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Gradient buttons</h3>
<button type="button" class="btn btn-primary gradient">Primary</button>
<button type="button" class="btn btn-success gradient">Success</button>
<button type="button" class="btn btn-info gradient">Info</button>
<button type="button" class="btn btn-warning gradient">Warning</button>
<button type="button" class="btn btn-danger gradient">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Rounded buttons</h3>
<button type="button" class="btn btn-primary round">Primary</button>
<button type="button" class="btn btn-success round">Success</button>
<button type="button" class="btn btn-info round">Info</button>
<button type="button" class="btn btn-warning round">Warning</button>
<button type="button" class="btn btn-danger round">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Raised buttons</h3>
<button type="button" class="btn btn-primary raised">Primary</button>
<button type="button" class="btn btn-success raised">Success</button>
<button type="button" class="btn btn-info raised">Info</button>
<button type="button" class="btn btn-warning raised">Warning</button>
<button type="button" class="btn btn-danger raised">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Rounded and raised buttons</h3>
<button type="button" class="btn btn-primary raised round">Primary</button>
<button type="button" class="btn btn-success raised round">Success</button>
<button type="button" class="btn btn-info raised round">Info</button>
<button type="button" class="btn btn-warning raised round">Warning</button>
<button type="button" class="btn btn-danger raised round">Danger</button>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<h3>Button sizes</h3>
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-success">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-info btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-danger btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
</div>
</div>
</div>
</div>
</div>
body {background:#e2e2e2;}
/************** BUTTONS CSS **************/
.btn {padding: 14px 24px;border: 0 none;font-weight: 700;letter-spacing: 1px;text-transform: uppercase;}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;}
/******************************************************
STANDARD BUTTONS
******************************************************/
.btn-default {border: 2px solid #C4C4C4;color: #737373;padding: 12px 22px;}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
background: #FFFFFF;border-color: #949494;color: #737373;}
.btn-default:active, .btn-default.active {
border-color: #737373;box-shadow: none;}
.btn-primary {background: #0099cc;color: #ffffff;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: #33a6cc;}
.btn-primary:active, .btn-primary.active {
background: #007299;box-shadow: none;}
.btn-success {background: #00bf6f;color: #ffffff;}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
background: #39bf87;}
.btn-success:active, .btn-success.active {
background: #008c52;box-shadow: none;}
.btn-info {background: #31cde8;color: #ffffff;}
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
background: #5fd4e8;}
.btn-info:active, .btn-info.active {
background: #35a2b5;box-shadow: none;}
.btn-warning {
background: #eb8f34;color: #ffffff;}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
background: #eba259;}
.btn-warning:active, .btn-warning.active {
background: #b87430;box-shadow: none;}
.btn-danger {background: #f25454;color: #ffffff;}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
background: #f26d6d;}
.btn-danger:active, .btn-danger.active {
background: #bf4343;box-shadow: none;}
/******************************************************
SHARP BUTTONS
******************************************************/
.btn.sharp {
border-radius: 0;
}
/******************************************************
OUTLINE BUTTONS
******************************************************/
.btn.outline {background: none; padding: 12px 22px;}
.btn-primary.outline {border: 2px solid #0099cc;color: #0099cc;}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #33a6cc; border-color: #33a6cc;}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #007299; color: #007299; box-shadow: none;}
.btn-success.outline {border: 2px solid #00bf6f; color: #00bf6f;}
.btn-success.outline:hover, .btn-success.outline:focus, .btn-success.outline:active, .btn-success.outline.active, .open > .dropdown-toggle.btn-success {
border-color: #39bf87;color: #39bf87;}
.btn-success.outline:active, .btn-success.outline.active {
border-color: #008c52;color: #008c52;box-shadow: none;}
.btn-info.outline { border: 2px solid #31cde8; color: #31cde8;}
.btn-info.outline:hover, .btn-info.outline:focus, .btn-info.outline:active, .btn-info.outline.active, .open > .dropdown-toggle.btn-info {
border-color: #5fd4e8; color: #5fd4e8;}
.btn-info.outline:active, .btn-info.outline.active {
border-color: #35a2b5; color: #35a2b5; box-shadow: none;}
.btn-warning.outline {
border: 2px solid #eb8f34; color: #eb8f34;}
.btn-warning.outline:hover, .btn-warning.outline:focus, .btn-warning.outline:active, .btn-warning.outline.active, .open > .dropdown-toggle.btn-warning {
border-color: #eba259; color: #eba259;}
.btn-warning.outline:active, .btn-warning.outline.active {
border-color: #b87430; color: #b87430; box-shadow: none;}
.btn-danger.outline { border: 2px solid #f25454; color: #f25454;}
.btn-danger.outline:hover, .btn-danger.outline:focus, .btn-danger.outline:active, .btn-danger.outline.active, .open > .dropdown-toggle.btn-danger {
border-color: #f26d6d; color: #f26d6d;}
.btn-danger.outline:active, .btn-danger.outline.active {
border-color: #bf4343; color: #bf4343; box-shadow: none;}
/******************************************************
GRADIENT BUTTONS
******************************************************/
.btn-primary.gradient {
background: -moz-linear-gradient(top, #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #33a6cc 50%,#0099cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #33a6cc 50%,#0099cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */
}
.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active, .btn-primary.gradient.active, .open > .dropdown-toggle.btn-primary {
background: -moz-linear-gradient(top, #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #66b2cc 50%,#33a6cc 50%); /* IE10+ */
background: linear-gradient(to bottom, #66b2cc 50%,#33a6cc 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */
}
.btn-primary.gradient:active, .btn-primary.gradient.active {
background: -moz-linear-gradient(top, #267c99 50%, #007299 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #267c99 50%,#007299 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #267c99 50%,#007299 50%); /* IE10+ */
background: linear-gradient(to bottom, #267c99 50%,#007299 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */
}
.btn-success.gradient {
background: -moz-linear-gradient(top, #39bf87 50%, #00bf6f 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#39bf87), color-stop(50%,#00bf6f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #39bf87 50%,#00bf6f 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #39bf87 50%,#00bf6f 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #39bf87 50%,#00bf6f 50%); /* IE10+ */
background: linear-gradient(to bottom, #39bf87 50%,#00bf6f 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39bf87', endColorstr='#00bf6f',GradientType=0 ); /* IE6-9 */
}
.btn-success.gradient:hover, .btn-success.gradient:focus, .btn-success.gradient:active, .btn-success.gradient.active, .open > .dropdown-toggle.btn-success {
background: -moz-linear-gradient(top, #73bf9f 50%, #39bf87 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#73bf9f), color-stop(50%,#39bf87)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #73bf9f 50%,#39bf87 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #73bf9f 50%,#39bf87 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #73bf9f 50%,#39bf87 50%); /* IE10+ */
background: linear-gradient(to bottom, #73bf9f 50%,#39bf87 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73bf9f', endColorstr='#39bf87',GradientType=0 ); /* IE6-9 */
}
.btn-success.gradient:active, .btn-success.gradient.active {
background: -moz-linear-gradient(top, #2a8c63 50%, #008c52 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#2a8c63), color-stop(50%,#008c52)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2a8c63 50%,#008c52 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2a8c63 50%,#008c52 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #2a8c63 50%,#008c52 50%); /* IE10+ */
background: linear-gradient(to bottom, #2a8c63 50%,#008c52 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a8c63', endColorstr='#008c52',GradientType=0 ); /* IE6-9 */
}
.btn-info.gradient {
background: -moz-linear-gradient(top, #5fd4e8 50%, #31cde8 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#5fd4e8), color-stop(50%,#31cde8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5fd4e8 50%,#31cde8 50%); /* IE10+ */
background: linear-gradient(to bottom, #5fd4e8 50%,#31cde8 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fd4e8', endColorstr='#31cde8',GradientType=0 ); /* IE6-9 */
}
.btn-info.gradient:hover, .btn-info.gradient:focus, .btn-info.gradient:active, .btn-info.gradient.active, .open > .dropdown-toggle.btn-info {
background: -moz-linear-gradient(top, #8edae8 50%, #5fd4e8 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#8edae8), color-stop(50%,#5fd4e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #8edae8 50%,#5fd4e8 50%); /* IE10+ */
background: linear-gradient(to bottom, #8edae8 50%,#5fd4e8 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8edae8', endColorstr='#5fd4e8',GradientType=0 ); /* IE6-9 */
}
.btn-info.gradient:active, .btn-info.gradient.active {
background: -moz-linear-gradient(top, #6baab5 50%, #35a2b5 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#6baab5), color-stop(50%,#35a2b5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6baab5 50%,#35a2b5 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6baab5 50%,#35a2b5 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6baab5 50%,#35a2b5 50%); /* IE10+ */
background: linear-gradient(to bottom, #6baab5 50%,#35a2b5 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6baab5', endColorstr='#35a2b5',GradientType=0 ); /* IE6-9 */
}
.btn-warning.gradient {
background: -moz-linear-gradient(top, #eba259 50%, #eb8f34 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#eba259), color-stop(50%,#eb8f34)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eba259 50%,#eb8f34 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eba259 50%,#eb8f34 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eba259 50%,#eb8f34 50%); /* IE10+ */
background: linear-gradient(to bottom, #eba259 50%,#eb8f34 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eba259', endColorstr='#eb8f34',GradientType=0 ); /* IE6-9 */
}
.btn-warning.gradient:hover, .btn-warning.gradient:focus, .btn-warning.gradient:active, .btn-warning.gradient.active, .open > .dropdown-toggle.btn-warning {
background: -moz-linear-gradient(top, #ebb57f 50%, #eba259 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ebb57f), color-stop(50%,#eba259)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ebb57f 50%,#eba259 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ebb57f 50%,#eba259 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ebb57f 50%,#eba259 50%); /* IE10+ */
background: linear-gradient(to bottom, #ebb57f 50%,#eba259 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebb57f', endColorstr='#eba259',GradientType=0 ); /* IE6-9 */
}
.btn-warning.gradient:active, .btn-warning.gradient.active {
background: -moz-linear-gradient(top, #b8824d 50%, #b87430 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#b8824d), color-stop(50%,#b87430)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b8824d 50%,#b87430 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b8824d 50%,#b87430 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b8824d 50%,#b87430 50%); /* IE10+ */
background: linear-gradient(to bottom, #b8824d 50%,#b87430 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8824d', endColorstr='#b87430',GradientType=0 ); /* IE6-9 */
}
.btn-danger.gradient {
background: -moz-linear-gradient(top, #f26d6d 50%, #f25454 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f26d6d), color-stop(50%,#f25454)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f26d6d 50%,#f25454 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f26d6d 50%,#f25454 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f26d6d 50%,#f25454 50%); /* IE10+ */
background: linear-gradient(to bottom, #f26d6d 50%,#f25454 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f26d6d', endColorstr='#f25454',GradientType=0 ); /* IE6-9 */
}
.btn-danger.gradient:hover, .btn-danger.gradient:focus, .btn-danger.gradient:active, .btn-danger.gradient.active, .open > .dropdown-toggle.btn-danger {
background: -moz-linear-gradient(top, #f28585 50%, #f26d6d 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#f28585), color-stop(50%,#f26d6d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f28585 50%,#f26d6d 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f28585 50%,#f26d6d 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f28585 50%,#f26d6d 50%); /* IE10+ */
background: linear-gradient(to bottom, #f28585 50%,#f26d6d 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28585', endColorstr='#f26d6d',GradientType=0 ); /* IE6-9 */
}
.btn-danger.gradient:active, .btn-danger.gradient.active {
background: -moz-linear-gradient(top, #bf5656 50%, #bf4343 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#bf5656), color-stop(50%,#bf4343)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bf5656 50%,#bf4343 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bf5656 50%,#bf4343 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bf5656 50%,#bf4343 50%); /* IE10+ */
background: linear-gradient(to bottom, #bf5656 50%,#bf4343 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf5656', endColorstr='#bf4343',GradientType=0 ); /* IE6-9 */
}
/******************************************************
ROUNDED BUTTONS
******************************************************/
.btn.round {border-radius: 24px;}
.btn-lg.round { border-radius: 32px;}
.btn-sm.round { border-radius: 14px;}
.btn-xs.round { border-radius: 10px;}
/******************************************************
RAISED BUTTONS
******************************************************/
.btn-primary.raised {box-shadow: 0 3px 0 0 #007299;}
.btn-primary.raised:active, .btn-primary.raised.active {
background: #33a6cc;box-shadow: none; margin-bottom: -3px; margin-top: 3px;}
.btn-success.raised {box-shadow: 0 3px 0 0 #008c52;}
.btn-success.raised:active, .btn-success.raised.active {
background: #39bf87; box-shadow: none; margin-bottom: -3px; margin-top: 3px;}
.btn-info.raised { box-shadow: 0 3px 0 0 #35a2b5;}
.btn-info.raised:active, .btn-info.raised.active {
background: #5fd4e8; box-shadow: none; margin-bottom: -3px;margin-top: 3px;}
.btn-warning.raised { box-shadow: 0 3px 0 0 #b87430;}
.btn-warning.raised:active, .btn-warning.raised.active {
background: #eba259;box-shadow: none;margin-bottom: -3px; margin-top: 3px;}
.btn-danger.raised {box-shadow: 0 3px 0 0 #bf4343;}
.btn-danger.raised:active, .btn-danger.raised.active {
background: #f26d6d;box-shadow: none;margin-bottom: -3px;margin-top: 3px;}
/******************************************************
BUTTON SIZING
******************************************************/
.btn-xs, .btn-group-xs > .btn { padding: 2px 6px;}
.btn-sm, .btn-group-sm > .btn { padding: 8px 12px;}
.btn-lg {padding: 20px 40px;border-radius: 4px;}
.btn-xs.btn-default, .btn-xs.outline {padding: 0px 4px;}
.btn-sm.btn-default, .btn-sm.outline { padding: 6px 10px;}
.btn-lg.btn-default, .btn-lg.outline { padding: 18px 38px;}
/********card frame **************/
.card {
position: relative;
border-radius: 3px;
background-color: #fff;
color: #4f5256;
border: 1px solid #f2f2f2;
margin-bottom: 16px;
background:#fff;
}
.card-header{ padding: 16px;margin:0px;}
.card-body {position: relative; padding: 16px;}
