<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid container-fixed-lg">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-transparent">
<div class="panel-heading">
<div class="panel-title">Button Colours for Portal</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<p>Primary Button</p>
<button class="btn btn-primary btn-shape">Primary</button>
<div class="row colour-info-box">
<div class="col-xs-1 no-padding">
<div class="bg-primary pt-30 pb-35"></div>
<div class="bg-primary-light pt-30 pb-35"></div>
<div class="bg-primary-dark pt-30 pb-35"></div>
</div>
<div class="col-xs-10 bg-white border-grey padding-10">
<p class="no-margin text-black bold text-uppercase fs-12">Normal</p>
<p class="no-margin fs-12">#6d5eac </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Hover</p>
<p class="no-margin fs-12">20% white </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Active</p>
<p class="no-margin fs-12">16.5% white </p>
</div>
</div>
<br>
<p class="small hint-text">
pages Default Multi-Purpose Theme Color. Add class by simply typing
<code>
btn-primary
</code>
</p>
</div>
<div class="col-md-3">
<p>Complete Button</p>
<button class="btn btn-complete btn-shape">Complete</button>
<div class="row colour-info-box">
<div class="col-xs-1 no-padding ">
<div class="bg-complete pt-30 pb-35"></div>
<div class="bg-complete-light pt-30 pb-35"></div>
<div class="bg-complete-dark pt-30 pb-35"></div>
</div>
<div class="col-xs-10 bg-white border-grey padding-10">
<p class="no-margin text-black bold text-uppercase fs-12">Normal</p>
<p class="no-margin fs-12">#6d5eac </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Hover</p>
<p class="no-margin fs-12">20% white </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Active</p>
<p class="no-margin fs-12">16.5% white </p>
</div>
</div>
<br>
<p class="small hint-text">
pages Default Multi-Purpose Theme Color. Add class by simply typing
<code>btn-complete</code>
</p>
</div>
<div class="col-md-3">
<p>Success Button</p>
<button class="btn btn-success btn-shape">Success</button>
<div class="row colour-info-box">
<div class="col-xs-1 no-padding ">
<div class="bg-success pt-30 pb-35"></div>
<div class="bg-success-light pt-30 pb-35"></div>
<div class="bg-success-dark pt-30 pb-35"></div>
</div>
<div class="col-xs-10 bg-white border-grey padding-10">
<p class="no-margin text-black bold text-uppercase fs-12">Normal</p>
<p class="no-margin fs-12">#6d5eac </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Hover</p>
<p class="no-margin fs-12">20% white </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Active</p>
<p class="no-margin fs-12">16.5% white </p>
</div>
</div>
<br>
<p class="small hint-text">
pages Default Multi-Purpose Theme Color. Add class by simply typing
<code>btn-success</code>
</p>
</div>
<div class="col-md-3">
<p>Danger Button</p>
<button class="btn btn-danger btn-shape">Danger</button>
<div class="row colour-info-box">
<div class="col-xs-1 no-padding">
<div class="bg-danger pt-30 pb-35"></div>
<div class="bg-danger-light pt-30 pb-35"></div>
<div class="bg-danger-dark pt-30 pb-35"></div>
</div>
<div class="col-xs-10 bg-white border-grey padding-10">
<p class="no-margin text-black bold text-uppercase fs-12">Normal</p>
<p class="no-margin fs-12">#6d5eac </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Hover</p>
<p class="no-margin fs-12">20% white </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Active</p>
<p class="no-margin fs-12">16.5% white </p>
</div>
</div>
<br>
<p class="small hint-text">
pages Default Multi-Purpose Theme Color. Add class by simply typing
<code>
btn-primary
</code>
</p>
</div>
<div class="col-md-3">
<p>Warning Button</p>
<button class="btn btn-warning btn-shape">Warning</button>
<div class="row colour-info-box">
<div class="col-xs-1 no-padding ">
<div class="bg-warning pt-30 pb-35"></div>
<div class="bg-warning-light pt-30 pb-35"></div>
<div class="bg-warning-dark pt-30 pb-35"></div>
</div>
<div class="col-xs-10 bg-white border-grey padding-10">
<p class="no-margin text-black bold text-uppercase fs-12">Normal</p>
<p class="no-margin fs-12">#6d5eac </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Hover</p>
<p class="no-margin fs-12">20% white </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Active</p>
<p class="no-margin fs-12">16.5% white </p>
</div>
</div>
<br>
<p class="small hint-text">
pages Default Multi-Purpose Theme Color. Add class by simply typing
<code>btn-warning</code>
</p>
</div>
<div class="col-md-3">
<p>White Button</p>
<button class="btn btn-default btn-shape">White</button>
<div class="row colour-info-box">
<div class="col-xs-1 no-padding ">
<div class="bg-white pt-30 pb-35"></div>
<div class="bg-master-light pt-30 pb-35"></div>
<div class="bg-master-dark pt-30 pb-35"></div>
</div>
<div class="col-xs-10 bg-white border-grey padding-10">
<p class="no-margin text-black bold text-uppercase fs-12">Normal</p>
<p class="no-margin fs-12">#6d5eac </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Hover</p>
<p class="no-margin fs-12">20% white </p>
<p class="pt-20 no-margin text-black bold text-uppercase fs-12">Active</p>
<p class="no-margin fs-12">16.5% white </p>
</div>
</div>
<br>
<p class="small hint-text">
pages Default Multi-Purpose Theme Color. Add class by simply typing
<code>btn-default</code>
</p>
</div>
</div>
<div class="row">
<br>
<h2>Outline Buttons</h2>
<p>Add the class <code>.btn-outline</code> to any Bootstrap button style.</p>
<a class="btn btn-primary btn-outline">Primary Button</a>
<div class="gap"></div>
<a class="btn btn-success btn-outline">Success Button</a>
<div class="gap"></div>
<a class="btn btn-warning btn-outline">Warning Button</a>
<div class="gap"></div>
<a class="btn btn-danger btn-outline">Danger Button</a>
<div class="gap"></div>
<a class="btn btn-default btn-outline">Default Button</a>
<div class="gap"></div>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #fff;
padding: 50px;
}
.container-fluid .panel {
background-color: #f1f1f1;
}
.btn {
font-family: Arial,sans-serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.01em;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-feature-settings: "kern" 1;
-moz-font-feature-settings: "kern" 1;
margin-bottom: 0;
border: 1px solid #f0f0f0;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
background-image: none!important;
color: #626262;
background-color: #dedede;
color: #fff;
text-shadow: none;
box-shadow: none;
line-height: 21px;
padding-left: 17px;
padding-right: 17px;
position: relative;
transition: color 0.1s linear 0s,background-color 0.1s linear 0s,opacity 0.2s linear 0s!important;
}
.btn-shape {margin-right: 5px; min-width: 120px;}
.border-grey {border: 1px solid #e6e6e6;}
.no-padding {padding: 0px!important;}
.colour-info-box { margin:15px; }
.padding-10 {padding: 10px!important;}
.bg-white {background-color: #fff;}
.pb-35 {padding-bottom: 35px!important;}
.pt-30 {padding-top: 30px!important;}
.text-black {color: #2c2c2c!important;}
.bold {font-weight: bold!important;}
.text-uppercase {text-transform: uppercase;}
.fs-12 {
font-size: 12px;
line-height: 19px;
margin: 0px 0px 5px 0px;
font-style: normal;
white-space: normal;
line-space: normal;
}
.colour-info-box p:nth-of-type(2):nth-child(2),
.colour-info-box p:nth-of-type(4):nth-child(4) {
margin-bottom:20px;
}
/* Primary Button Colours */
.btn-primary, .btn-primary:focus {
background-color: #6d5cae;
border-color: #6d5cae;
}
.btn-primary.hover, .btn-primary:hover, .open .dropdown-toggle.btn-primary {
background-color: #8a7dbe;
border-color: #8a7dbe;
}
.bg-primary {background-color: #6d5cae;}
.bg-primary-light {background-color: #8a7dbe;}
.bg-primary-dark {background-color: #584b8d;}
/* Complete */
.btn-complete, .btn-complete:focus {
background-color: #48b0f7;
border-color: #48b0f7;
}
.btn-complete.hover, .btn-complete:hover, .open .dropdown-toggle.btn-complete {
background-color: #6dc0f9;
border-color: #6dc0f9;
}
.bg-complete {background-color: #48b0f7;}
.bg-complete-light {background-color: #6dc0f9;}
.bg-complete-dark {background-color: #3a8fc8;}
/* Success */
.btn-success, .btn-success:focus {
background-color: #10cfbd;
border-color: #10cfbd;
}
.btn-success.hover, .btn-success:hover, .open .dropdown-toggle.btn-success {
background-color: #40d9ca;
border-color: #40d9ca;
}
.bg-success {background-color: #10cfbd;}
.bg-success-light {background-color: #40d9ca;}
.bg-success-dark {background-color: #0da899;}
/* Danger */
.btn-danger, .btn-danger:focus {
background-color: #f55753;
border-color: #f55753;
}
.btn-danger.hover, .btn-danger:hover, .open .dropdown-toggle.btn-danger {
background-color: #f77975;
border-color: #f77975;
}
.bg-danger {background-color: #f55753;}
.bg-danger-light {background-color: #f77975;}
.bg-danger-dark {background-color: #c64643;}
/* Warning */
.btn-warning, .btn-warning:focus {
color: #ffffff;
background-color: #f8d053;
border-color: #f8d053;
}
.btn-warning.hover, .btn-warning:hover, .open .dropdown-toggle.btn-warning {
background-color: #f9d975;
border-color: #f9d975;
color: #ffffff;
}
.bg-warning{background-color: #f8d053;}
.bg-warning-light{background-color: #f9d975;}
.bg-warning-dark{background-color: #c9a843;}
/* White */
.btn-default, .btn-default:focus {
color: #5e5e5e;
background-color: #ffffff;
border-color: #f0f0f0;
}
.btn-default.hover, .btn-default:hover {
background-color: #fafafa;
border-color: rgba(98,98,98,0.27);
color: #1a1a1a;
}
.bg-white{background-color: #fff;}
.bg-master-light{background-color: #e6e6e6;}
.bg-master-dark{background-color: #2c2c2c;}
.btn-outline {
background-color: transparent;
color: inherit;
transition: all .5s;
border: 3px solid;
font-weight: bold;
}
.btn-primary.btn-outline {
color: #428bca;
}
.btn-primary.btn-outline:hover {
color: #02549b!important;
}
.btn-success.btn-outline {
color: #5cb85c;
}
.btn-success.btn-outline:hover {
color: #009c00!important;
}
.btn-default.btn-outline {
color: #222!important;
}
.btn-default.btn-outline:hover {
color: #444!important;
}
.btn-warning.btn-outline {
color: #f0ad4e;
}
.btn-warning.btn-outline:hover {
color: #e68700!important;
}
.btn-danger.btn-outline {
color: #d9534f;
}
.btn-danger.btn-outline:hover {
color: #bc2621!important;
}
.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-default.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
color: #fff;
background-color: transparent;
}
.gap {
position: relative;
display: inline-block;
height: 3px;
width: 7px;
background: white;
top: 15px;
left: -14px;
}
