Buttons and links are the standard forms of communication between the user and the system. In fact, they They are vital in creating interactions and providing a good UX. After all, these features make it possible for users to move about, take action, or make a decision decide with a single tap.

Image RemovedBut that's not all, though!

Image Added

Adding a button to the page gives it a more eye-popping appeal since they usually have the highest emphasis on the web (or any other) page. But there's more to it than meets the eye. Buttons are one of are among the most effective ways to increase conversions, whether from one page to the next or to your chosen goal page. The same goes for Confluence pages. And this is precisely why it's crucial to include these features.

Examples

Button macro

buttonNewLink
buttonText	Click here
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#0dbd44ff#5f0dbdff
buttonBorderColor	#5f0dbdff
buttonBorderHoverColor	#0dbd44ff#5f0dbdff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium	buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColorbuttonWidthDetection	#ffffff
buttonIcon	font-awesome/Rocket
buttonType	text
buttonLink	""
buttonRadius	5
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

20

buttonWidth
buttonText	Click here
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#ffffff
buttonBorderColor	#0dbd44ff
buttonNewTab	false
buttonFontColor	#0dbd44ff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	190
buttonHoverColor	#ffffff
buttonFontHoverColor	#5f0dbdff
buttonIconHoverColor	#0dbd44ff
buttonIcon	font-awesome/Rocket
buttonType	text	buttonNewLink
buttonLink	""
buttonRadius	5
buttonShadow	0
emojiEnabled	false

Button macro

buttonNewLink
buttonText	Quick tip
isButtonShadowOn	true
emoji	{"id":"smileatt619839676","namelink":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#6554c0ff
buttonBorderColor	#6554c0ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	material-design/Lightbulb
buttonType	icon_left
buttonLink	""
buttonRadius	3
https://caelor.atlassian.net/wiki/pages/viewpageattachments.action?pageId=164495490&preview=%2F164495490%2F619839676%2FScreenshot+2022-06-26+at+07.06.27.png","title":"Screenshot 2022-06-26 at 07.06.27.png","type":"image/png","source":"attachments"}
buttonRadius	5
buttonNewLink
buttonShadow	0
emojiEnabled	false
buttonWidth	20190

Button macro

buttonText	PowerPointClick here
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#ff4310#ffffff
buttonBorderColor	#ff4310#5f0dbdff
buttonBorderHoverColor	#5f0dbdff
buttonNewTab	false
buttonFontColor	#ffffff#5f0dbdff
buttonSize	medium
buttonIconColor	#ffffff
buttonWidthDetection	46
buttonHoverColor	#5f0dbdff
buttonIconColorbuttonFontHoverColor	#ffffff
buttonHoverColorbuttonIconHoverColor	#ffffff
buttonIcon	font-awesome/FilePowerpointRocket
buttonType	icon_lefttext
buttonNewLink	buttonLink	""
buttonRadius	45
buttonNewLink
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonNewLink
buttonText	FigmaQuick tip
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#000000ff#5f0dbdff
buttonBorderColor	#5f0dbdff
buttonBorderHoverColor	#000000ff#5f0dbdff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium	buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColorbuttonWidthDetection	#ffffff
buttonIcon	font-awesome/Figma
buttonType	icon_left
buttonLink	""
buttonRadius	4
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText	Reddit
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#ff5700ff
buttonBorderColor	#ff5700ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	font-awesome/RedditAlien46
buttonHoverColor	#ffffff
buttonFontHoverColor	#5f0dbdff
buttonIconHoverColor	#5f0dbdff
buttonIcon	material-design/Lightbulb
buttonType	icon_left
buttonNewLink	buttonLink	""
buttonRadius	3
buttonNewLink
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText	Button LabelPowerPoint
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#ff4310
buttonBorderColor	#ff4310
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	font-awesome/FilePowerpoint
buttonType	icon_onlyleft
buttonNewLink
buttonLink	""
buttonRadius	4
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText	Button LabelFigma
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#000000ff
buttonBorderColor	#000000ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	font-awesome/Figma
buttonType	icon_onlyleft
buttonNewLink
buttonLink	""
buttonRadius	4
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonNewLink
buttonText	Button LabelReddit
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#ff5700ff
buttonBorderColor	#ff5700ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	font-awesome/RedditAlien
buttonType	icon_only
buttonLink	""
buttonRadius	20
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText

Facebook

isButtonShadowOn

true

emoji

{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}

buttonColor

#4267b2ff

buttonBorderColor

#4267b2ff

buttonNewTab

false

buttonFontColor

#ffffff

buttonSize

medium

buttonWidthDetection

46

buttonIconColor

#ffffff

buttonHoverColor

#ffffff

buttonIcon

font-awesome/FacebookSquare

buttonType

icon_left

buttonNewLink

buttonLink

""

buttonRadius

3

buttonShadow

0

emojiEnabled

false

buttonWidth

20

Button macro

buttonText

isButtonShadowOn

true

emoji

{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}

buttonColor

#0a66c2ff

buttonBorderColor

#0a66c2ff

buttonNewTab

false

buttonFontColor

#ffffff

buttonSize

medium

buttonWidthDetection

46

buttonIconColor

#ffffff

buttonHoverColor

#ffffff

buttonIcon

font-awesome/Linkedin

buttonType

icon_left

buttonNewLink

buttonLink

""

buttonRadius

3

buttonShadow

0

emojiEnabled

false

buttonWidth

20

Button macro

buttonText	Microsoft Teams
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#464eb8ff
buttonBorderColor	#464eb8ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	atlaskit/InviteTeamIcon
buttonType	icon_left
buttonNewLink
buttonLink	""
buttonRadius	3
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText	Button Label
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#4267b2ff
buttonBorderColor	#4267b2ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	font-awesome/FacebookF
buttonType	icon_only
buttonNewLink
buttonLink	""
buttonRadius	19
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText	Button Label
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#0a66c2ff
buttonBorderColor	#0a66c2ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	font-awesome/Linkedin
buttonType	icon_only
buttonNewLink
buttonLink	""
buttonRadius	20
buttonShadow	0
emojiEnabled	false
buttonWidth	20

Button macro

buttonText	Microsoft Teams
isButtonShadowOn	true
emoji	{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}
buttonColor	#464eb8ff
buttonBorderColor	#464eb8ff
buttonNewTab	false
buttonFontColor	#ffffff
buttonSize	medium
buttonWidthDetection	46
buttonIconColor	#ffffff
buttonHoverColor	#ffffff
buttonIcon	atlaskit/InviteTeamIcon
buttonType	icon_only
buttonNewLink
buttonLink	""
buttonRadius	20
buttonShadow	0
emojiEnabled	false
buttonWidth	20

How to use

To add the Button macro to a Confluence page:

Choose “+” in the Confluence editor
Search “button” and select the MacroSuite - Button.

Alternatively, type '/' on the Confluence page to see a list of suggestions and type 'Button.' Intuitive configuration dialogue helps users to create and

customise

customize buttons fast and easily.

Image Removed

Image Added

Add label here	Usean inline editing feature and seamlessly edit the content of your button. Write your button copy directly on-screen and make quick changes with one click. The character limit is 40.
Icon/Emoji	Click on icon and choose from more than 5000 icons available and attract even more attention with Atlassian built-in emojis

. To change the icon position or remove label, use the “Icon” dropdown in the macro configuration

.
Button Width	Use the slider to change the button width. It will add space inside the button.
Button Radius	Use

the slider

predefined values to round the edges of your button.
Shadow	Activate shadow with selecting one of the four predefined shadow styles:

Inner

No shadow, outer shadow, and drop shadow

and neumorphism

.
Color	Choose a fill,

font

border,

hover

text, and icon

and border colours

colors from the Atlassian primary and secondary

colour palette

color palette. Choose a fill, border, text, and icon hover colors. If you want to add more

colours

colors, use the HEX editor.
Button Link	Add links to Confluence content (pages and attachments) and external URLs, giving them a more polished look. Use the email tab to open the mail client with the click on the button.

Templates and Library

MacroSuite Button macro 's got you covered with its Templatestemplates. If having too many options overwhelms you, just pick one of the available Button templates and add a pre-designed button to your Confluence page.

Our UX/UI teams works on more button templates and categories. It is not possible to change or delete predefined templates. Use the library feature to create and maintain the company design guidelines.

Image Removed

Image Added

If you want to save your custom-designed Buttonbutton, you can do so easily by adding it to the Librarylibrary. Additionally, saving your Button button to the Library library makes it accessible to everyone on your team. So, don't lose it even if you don't use it! Save it for later and help your teammates overcome their creative blocks.

Image Removed

Not all Confluence users have permissions to save created buttons to library. Open MacroSuite styleguilde and add users/groups that can create library buttons from the dialogue

.

Confluence admins have all permissions enabled.

Image Removed

Roadmap

The button will receive updates to improve performance and user experience. We will introduce the following features soon:

Create a ticket in Jira with a click on the button

Upload and use icons

Company colors

Status
colour Green
title RELEASED!
Button library (Save button)
Status
colour Green
title RELEASED!
User permissions to save button
Status
colour Green
title RELEASED!
More icons
Status
colour Green
title RELEASED!
Button shadow
Status
colour Green
title RELEASED!
Hover options
Status
colour Green
title RELEASED!
Create a ticket in Jira with a click on the button
Status
colour Blue
title progress
Custom icons
Status
colour Blue
title progress

If you have any questions, need more detailed information, or want to share feature suggestions, please feel free to contact us via our service desk.

Button macro

buttonNewLink

buttonText	Suggest new feature
isButtonShadowOn	true
emoji	{}
buttonColor	#0252cc#0052CC
buttonBorderColor	transparent
buttonBorderHoverColor	transparent
buttonNewTab	true
buttonFontColor	#ffffff
buttonSize	medium
buttonIconColor	#ffffff
buttonWidthDetection	280
buttonHoverColor	260transparent
buttonIconColorbuttonFontHoverColor	#fffffftransparent
buttonHoverColorbuttonIconHoverColor	#0252cctransparent
buttonIcon	fasbootstrap/angle-rightCloudsFill
buttonType	icon_right	text
buttonLink	{"link":"https://caelor.atlassian.net/servicedesk/customer/portal/1/group/1/create/8","source":"direct"}
buttonRadius	320
buttonNewLink
buttonShadowemojiEnabled	0false
buttonWidth	260280

How to create Buttons with Easy HTML macro

Button group

Social media buttons

Download Buttons

Loading buttons

Learn more about Easy HTML

MacroSuite News

Cp content card macrodata{"type":"blog","variant":"grid","columns":1,"contributors":[],"labels":[],"spaces":[],"pagination":"carousel","enrichment":"dynamic","limit":"2","manuallyPicked":[],"_migrations":["migrateContentCards"]}

Versions Compared

Old Version 157

New Version Current

Key

Examples

How to use

Templates and Library

Roadmap