I use Confluence Server 6.9 and wanted a button that I could colorize and left, center, or right align it within a Confluence page. I also wanted to use it to open pages in the same tab/window or a new tab/window. The only current issue with this is when you export the page as a PDF for instance, it does not make the button a link. It only makes it a picture. These are the main configurations for my custom button user macro:
1. Categories: "Navigation"
2. Definition of User Macro: No macro body
3. Icon:
4. Button Macro Template:
## Macro title: Button
## Macro has a body: N
## Body processing: no macro body
## Output: Selected output option
##
## Developed by: Tim Braxton
## Date created: 05/25/2018
## Installed by: Tim Braxton
## This is a button macro.
## @Param Link:title=Link|type=string|default=https://community.atlassian.com|required=true|desc=Enter your hyperlink.
## @Param BtnText:title=Button Text|type=string|default=Click
Me|required=true|desc=Enter your button's text.
## @Param OpenNewTab:title=Open in New Tab/ Window?
|type=enum|enumValues=_blank,_self|default=_blank|required=true|desc="
_blank" = Open link in new tab/window. "_self" = Open link in same tab
/window.
## @Param Position:title=Button Alignment|type=enum|enumValues=Left,Center,
Right|default=Center|required=true|desc=Select how you would like the
button aligned.
## @Param ButtonBackColor:title=Button Background
Color|type=string|default=#245491|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
## @Param ButtonFontColor:title=Button Font
Color|type=string|default=#ffffff|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
## @Param ButtonBackColorHover:title=Button Background on Hover
Color|type=string|default=#c2d7f2|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
## @Param ButtonFontColorHover:title=Button Font Color
Hover|type=string|default=#292929|required=true|desc=Enter a name, hex
code, rgb value, or hsl value found at <a href="https://www.w3schools.com
/colors/colors_picker.asp">w3schools Color Picker</a><p>Examples:<
/p><p>Red</p><p>#ff0000</p><p>rgb(255, 0, 0)</p><p>hsl(0, 100%, 50%)</p>
#if ( $paramPosition == "Left" )
#set ( $CSSPostion = "display:block;margin-right:auto;" )
#elseif ( $paramPosition == "Center" )
#set ( $CSSPostion = "display:block;margin-left:auto;margin-right:auto;" )
#elseif ( $paramPosition == "Right" )
#set ( $CSSPostion = "display:block;margin-left:auto;" )
#end
<style>
.${paramPosition}button {
$CSSPostion
margin-top: 5px;
background-color: $paramButtonBackColor;
border: none;
color: $paramButtonFontColor;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.${paramPosition}button:hover {
background-color: $paramButtonBackColorHover;
color: $paramButtonFontColorHover;
}
</style>
<button class="${paramPosition}button" onclick="window.open('$paramLink',
'$paramOpenNewTab');">$paramBtnText</button>
