"Button Design UI for Portal"
Bootstrap 3.0.0 Snippet by richardbirley

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

Related: See More


Questions / Comments: