1. Home
  2. Docs
  3. Confluence
  4. Confluence User Macros
  5. Bootstrap Button

Bootstrap Button

Summary

This Confluence user macro adds a Bootstrap like button in different colors and sizes, linking to a URL.

Source Code

#* ============================================================================
 * BOOTSTRAP BUTTON
 *
 * This Confluence user macro adds a Bootstrap like button in different colors
 * and sizes, linking to a URL. 
 *
 * Version: 1.0.001
 * Date:    2016-11-17
 * Author:  George Lewe
 * Source:  https://github.com/glewe/bootstrap-button
 * License: GNU LGPLv3
 *
 * Macro body:      None
 * Body processing: None
 *#

#* ----------------------------------------------------------------------------
 * PARAMETER
 *#
## @param Style:title=Style|type=enum|enumValues=Gray,Blue,Cyan,Green,Orange,Red|default=Gray
## @param Size:title=Size|type=enum|enumValues=Large,Medium,Small|default=Large
## @param Title:title=Title|type=string|desc=Enter the button title|default=Button
## @param Link:title=Link|type=string|desc=Enter a link that this button shall trigger|default=https://docspace.lhsystems.com
## @param Target:title=Link target|type=enum|enumValues=Same window,New window|desc=Select the target of the link|default=Same window
## @param ScrollExportID:title=Scroll PDF Export ID|type=string|desc=You can use this button to launch a specific Scroll PDF Export. Just enter the export ID here. How to find this ID can be read <a href="https://www.k15t.com/display/PDF/Where+can+I+find+my+Export+Scheme+ID">here</a>.|default=

#* ----------------------------------------------------------------------------
 * PROCESS INPUT
 *#
#if ($paramStyle=="Gray")
   #set ($paramButtonStyle="btn-default")
#elseif ($paramStyle=="Blue")
   #set ($paramButtonStyle="btn-primary")
#elseif ($paramStyle=="Cyan")
   #set ($paramButtonStyle="btn-info")
#elseif ($paramStyle=="Green")
   #set ($paramButtonStyle="btn-success")
#elseif ($paramStyle=="Orange")
   #set ($paramButtonStyle="btn-warning")
#elseif ($paramStyle=="Red")
   #set ($paramButtonStyle="btn-danger")
#else
   #set ($paramButtonStyle="btn-default")
#end

#if ($paramSize=="Large")
   #set ($paramButtonSize="btn-lg")
#elseif ($paramSize=="Medium")
   #set ($paramButtonSize="btn-sm")
#elseif ($paramSize=="Small")
   #set ($paramButtonSize="btn-xs")
#else
   #set ($paramButtonSize="btn-lg")
#end

#if (!$paramTitle)
   #set ($paramTitle="Button")
#end

#if (!$paramLink)
   #set ($paramLink="https://docspace.lhsystems.com")
#end

#if ($paramTarget=="Same window")
   #set ($paramLinkTarget="_self")
#elseif ($paramTarget=="New window")
   #set ($paramLinkTarget="_blank")
#else
   #set ($paramLinkTarget="_self")
#end

#set ($varScroll="")
#if ($paramScrollExportID != "")
   #set ($varScroll="class='scroll-pdf-launcher' data-export-scheme-id='"+$paramScrollExportID+"'")
   #set ($paramLink="#")
   #set ($paramLinkTarget="_self")
#end

#* ----------------------------------------------------------------------------
 * OUTPUT
 *#
<a href="$paramLink" target="$paramLinkTarget" $varScroll><button class="btn $paramButtonStyle $paramButtonSize">$paramTitle</button></a>

#* ----------------------------------------------------------------------------
 * STYLE SHEET
 *#
<style type="text/css">
button {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
   line-height: normal;
   text-transform: none;
   cursor: pointer;
   -webkit-appearance: button;
}

button[disabled] {
   cursor: default;
}

button::-moz-focus-inner {
   padding: 0;
   border: 0;
}

.btn {
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: normal;
   line-height: 1.428571429;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;
        -o-user-select: none;
           user-select: none;
}

.btn:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px;
}

.btn:hover,
.btn:focus {
   color: #333333;
   text-decoration: none;
}

.btn:active,
.btn.active {
   background-image: none;
   outline: 0;
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
           box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.disabled,
.btn[disabled] {
   pointer-events: none;
   cursor: not-allowed;
   opacity: 0.65;
   filter: alpha(opacity=65);
   -webkit-box-shadow: none;
           box-shadow: none;
}

.btn-default {
   color: #333333;
   background-color: #ffffff;
   border-color: #cccccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
   color: #333333;
   background-color: #ebebeb;
   border-color: #adadad;
}

.btn-default:active,
.btn-default.active {
   background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
.btn-default.disabled.active,
.btn-default[disabled].active {
   background-color: #ffffff;
   border-color: #cccccc;
}

.btn-primary {
   color: #ffffff;
   background-color: #428bca;
   border-color: #357ebd;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
   color: #ffffff;
   background-color: #3276b1;
   border-color: #285e8e;
}

.btn-primary:active,
.btn-primary.active {
   background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active {
   background-color: #428bca;
   border-color: #357ebd;
}

.btn-warning {
   color: #ffffff;
   background-color: #f0ad4e;
   border-color: #eea236;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
   color: #ffffff;
   background-color: #ed9c28;
   border-color: #d58512;
}

.btn-warning:active,
.btn-warning.active {
   background-image: none;
}

.btn-warning.disabled,
.btn-warning[disabled],
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active {
   background-color: #f0ad4e;
   border-color: #eea236;
}

.btn-danger {
   color: #ffffff;
   background-color: #d9534f;
   border-color: #d43f3a;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
   color: #ffffff;
   background-color: #d2322d;
   border-color: #ac2925;
}

.btn-danger:active,
.btn-danger.active {
   background-image: none;
}

.btn-danger.disabled,
.btn-danger[disabled],
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active {
   background-color: #d9534f;
   border-color: #d43f3a;
}

.btn-success {
   color: #ffffff;
   background-color: #5cb85c;
   border-color: #4cae4c;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
   color: #ffffff;
   background-color: #47a447;
   border-color: #398439;
}

.btn-success:active,
.btn-success.active {
   background-image: none;
}

.btn-success.disabled,
.btn-success[disabled],
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
.btn-success.disabled.active,
.btn-success[disabled].active {
   background-color: #5cb85c;
   border-color: #4cae4c;
}

.btn-info {
   color: #ffffff;
   background-color: #5bc0de;
   border-color: #46b8da;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
   color: #ffffff;
   background-color: #39b3d7;
   border-color: #269abc;
}

.btn-info:active,
.btn-info.active {
   background-image: none;
}

.btn-info.disabled,
.btn-info[disabled],
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
.btn-info.disabled.active,
.btn-info[disabled].active {
   background-color: #5bc0de;
   border-color: #46b8da;
}

.btn-link {
   font-weight: normal;
   color: #428bca;
   cursor: pointer;
   border-radius: 0;
}

.btn-link,
.btn-link:active,
.btn-link[disabled] {
   background-color: transparent;
   -webkit-box-shadow: none;
           box-shadow: none;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
   border-color: transparent;
}

.btn-link:hover,
.btn-link:focus {
   color: #2a6496;
   text-decoration: underline;
   background-color: transparent;
}

.btn-link[disabled]:hover,
.btn-link[disabled]:focus {
   color: #999999;
   text-decoration: none;
}

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

.btn-sm {
   padding: 5px 10px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
}

.btn-xs {
   padding: 1px 5px;
   font-size: 12px;
   line-height: 1.5;
   border-radius: 3px;
}

.btn-block {
   display: block;
   width: 100%;
   padding-right: 0;
   padding-left: 0;
}

.btn-block + .btn-block {
   margin-top: 5px;
}

.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-default:active,
.btn-primary:active,
.btn-success:active,
.btn-info:active,
.btn-warning:active,
.btn-danger:active,
.btn-default.active,
.btn-primary.active,
.btn-success.active,
.btn-info.active,
.btn-warning.active,
.btn-danger.active {
   -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
           box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn:active,
.btn.active {
   background-image: none;
}

.btn-default {
   text-shadow: 0 1px 0 #fff;
   background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
   background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
   background-repeat: repeat-x;
   border-color: #dbdbdb;
   border-color: #ccc;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#ffffff', endColorstr='#e0e0e0', GradientType=0);
}

.btn-default:hover,
.btn-default:focus {
   background-color: #e0e0e0;
   background-position: 0 -15px;
}

.btn-default:active,
.btn-default.active {
   background-color: #e0e0e0;
   border-color: #dbdbdb;
}

.btn-primary {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
   background-image: linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
   background-repeat: repeat-x;
   border-color: #2b669a;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#428bca', endColorstr='#2d6ca2', GradientType=0);
}

.btn-primary:hover,
.btn-primary:focus {
   background-color: #2d6ca2;
   background-position: 0 -15px;
}

.btn-primary:active,
.btn-primary.active {
   background-color: #2d6ca2;
   border-color: #2b669a;
}

.btn-success {
   background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
   background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
   background-repeat: repeat-x;
   border-color: #3e8f3e;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#5cb85c', endColorstr='#419641', GradientType=0);
}

.btn-success:hover,
.btn-success:focus {
   background-color: #419641;
   background-position: 0 -15px;
}

.btn-success:active,
.btn-success.active {
   background-color: #419641;
   border-color: #3e8f3e;
}

.btn-warning {
   background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
   background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
   background-repeat: repeat-x;
   border-color: #e38d13;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#f0ad4e', endColorstr='#eb9316', GradientType=0);
}

.btn-warning:hover,
.btn-warning:focus {
   background-color: #eb9316;
   background-position: 0 -15px;
}

.btn-warning:active,
.btn-warning.active {
   background-color: #eb9316;
   border-color: #e38d13;
}

.btn-danger {
   background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
   background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
   background-repeat: repeat-x;
   border-color: #b92c28;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#d9534f', endColorstr='#c12e2a', GradientType=0);
}

.btn-danger:hover,
.btn-danger:focus {
   background-color: #c12e2a;
   background-position: 0 -15px;
}

.btn-danger:active,
.btn-danger.active {
   background-color: #c12e2a;
   border-color: #b92c28;
}

.btn-info {
   background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
   background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
   background-repeat: repeat-x;
   border-color: #28a4c9;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#5bc0de', endColorstr='#2aabd2', GradientType=0);
}

.btn-info:hover,
.btn-info:focus {
   background-color: #2aabd2;
   background-position: 0 -15px;
}

.btn-info:active,
.btn-info.active {
   background-color: #2aabd2;
   border-color: #28a4c9;
}
</style>
Was this article helpful to you? Yes No

Leave a Reply

Your email address will not be published. Required fields are marked *