Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Buttons and links are the standard forms of communication between the user and the system. 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 decide with a single tap.

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 among the most effective ways to increase conversions from one page to the next or your chosen goal page. The same goes for Confluence pages.


Examples

Button macro
5
buttonTextClick here
isButtonShadowOntrue
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#0dbd44ff
buttonBorderHoverColor#5f0dbdff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonIconColor#ffffff
buttonWidthDetection190
buttonIconColorbuttonHoverColor#ffffff
buttonFontHoverColor#5f0dbdff
buttonHoverColorbuttonIconHoverColor#ffffff#0dbd44ff
buttonIconfont-awesome/Rocket
buttonTypetext
buttonRadiusbuttonNewLink5
buttonLink{"id":"att619839676","link":"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"}
buttonRadiusbuttonNewLink
buttonShadow0
emojiEnabledfalse
buttonWidth190

Button macro
5
buttonTextClick here
isButtonShadowOntrue
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#5f0dbdff#0dbd44ff
buttonBorderHoverColor#5f0dbdff
buttonNewTabfalse
buttonFontColor#0dbd44ff#5f0dbdff
buttonSizemedium
buttonIconColor#ffffff
buttonWidthDetection46
buttonHoverColor#5f0dbdff
buttonIconColorbuttonFontHoverColor#ffffff
buttonHoverColorbuttonIconHoverColor#0dbd44ff#ffffff
buttonIconfont-awesome/Rocket
buttonTypetext
buttonNewLinkbuttonRadius5
buttonLink""
buttonRadiusbuttonNewLink
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextQuick tip
isButtonShadowOntrue
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#6554c0ff#5f0dbdff
buttonBorderColor#5f0dbdff
buttonBorderHoverColor#6554c0ff#5f0dbdff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonIconColor#ffffff
buttonWidthDetection46
buttonIconColorbuttonHoverColor#ffffff
buttonFontHoverColor#5f0dbdff
buttonHoverColorbuttonIconHoverColor#ffffff#5f0dbdff
buttonIconmaterial-design/Lightbulb
buttonTypeicon_left
buttonRadiusbuttonNewLink3
buttonLink""
buttonRadiusbuttonNewLink3
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextPowerPoint
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/FilePowerpoint
buttonTypeicon_left
buttonNewLink
buttonLink""
buttonRadius4
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextFigma
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/Figma
buttonTypeicon_left
buttonNewLink
buttonLink""
buttonRadius4
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextReddit
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/RedditAlien
buttonTypeicon_left
buttonNewLink
buttonLink""
buttonRadius3
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextButton Label
isButtonShadowOntrue
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#4267b2ff
buttonBorderColor#ff4310#4267b2ff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/FilePowerpointFacebookF
buttonTypeicon_only
buttonNewLink
buttonLink""
buttonRadius419
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextButton Label
isButtonShadowOntrue
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#0a66c2ff
buttonBorderColor#000000ff#0a66c2ff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/FigmaLinkedin
buttonTypeicon_only
buttonNewLink
buttonLink""
buttonRadius420
buttonShadow0
emojiEnabledfalse
buttonWidth20

Button macro
buttonTextButton LabelMicrosoft Teams
isButtonShadowOntrue
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#464eb8ff
buttonBorderColor#ff5700ff#464eb8ff
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesomeatlaskit/RedditAlienInviteTeamIcon
buttonTypeicon_only
buttonNewLink
buttonLink""
buttonRadius20
buttonShadow0
emojiEnabledfalse
buttonWidth20
Button macro
buttonTextFacebook
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/FacebookSquare
buttonTypeicon_left
buttonNewLink
buttonLink""
buttonRadius3
buttonShadow0
emojiEnabledfalse
buttonWidth20
Button macro
buttonTextLinkedIn
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/Linkedin
buttonTypeicon_left
buttonNewLink
buttonLink""
buttonRadius3
buttonShadow0
emojiEnabledfalse
buttonWidth20
Button macro
buttonTextMicrosoft Teams
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconatlaskit/InviteTeamIcon
buttonTypeicon_left
buttonNewLink
buttonLink""
buttonRadius3
buttonShadow0
emojiEnabledfalse
buttonWidth20
Button macro
buttonTextButton Label
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/FacebookF
buttonTypeicon_only
buttonNewLink
buttonLink""
buttonRadius19
buttonShadow0
emojiEnabledfalse
buttonWidth20
Button macro
buttonTextButton Label
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconfont-awesome/Linkedin
buttonTypeicon_only
buttonNewLink
buttonLink""
buttonRadius20
buttonShadow0
emojiEnabledfalse
buttonWidth20
Button macro
buttonTextMicrosoft Teams
isButtonShadowOntrue
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
buttonNewTabfalse
buttonFontColor#ffffff
buttonSizemedium
buttonWidthDetection46
buttonIconColor#ffffff
buttonHoverColor#ffffff
buttonIconatlaskit/InviteTeamIcon
buttonTypeicon_only
buttonNewLink
buttonLink""
buttonRadius20
buttonShadow0
emojiEnabledfalse
buttonWidth20

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 customize buttons fast and easily.

Image Removed
Image Removed

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 customize buttons fast and easily.

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 to round the edges of your button.

Shadow

Activate shadow with selecting one of the four predefined shadow styles: No shadow, outer shadow, and drop shadow.

Color

Choose a fill, border, text, and icon colors from the Atlassian primary and secondary color palette. Choose a fill, border, text, and icon hover colors. If you want to add more 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, 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 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

Save it for later and help your teammates overcome their creative blocks.


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 StatuscolourGreentitleRELEASED!

    :

    • Button library (Save button)

      Status
      colourGreen
      titleRELEASED!

    • User permissions to save button

      Status
      colourGreen
      titleRELEASED!

    • More icons

      Status
      colourGreen
      titleRELEASED!

    • Button shadow

      Status
      colourGreen
      titleRELEASED!

    • Hover options

      Status
      colourGreen
      titleRELEASED!

    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 macrobuttonTextSuggest new featureisButtonShadowOntrueemoji{"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#0252ccbuttonBorderColor
    • Create a ticket in Jira with a click on the button

      Status
      colourBlue
      titleprogress

    • Custom icons

      Status
      colourBlue
      titleprogress

    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
    buttonTextSuggest new feature
    isButtonShadowOntrue
    emoji{}
    buttonColor#0052CC
    buttonBorderColortransparent
    buttonBorderHoverColortransparent
    buttonNewTabtrue
    buttonFontColor#ffffff
    buttonSizemedium
    buttonIconColor#ffffff
    buttonWidthDetection280260
    buttonHoverColortransparent
    buttonIconColorbuttonFontHoverColor#fffffftransparent
    buttonHoverColorbuttonIconHoverColor#0252cctransparent
    buttonIconfasbootstrap/angle-rightCloudsFill
    buttonTypeicon_righttextbuttonNewLink
    buttonLink{"link":"https://caelor.atlassian.net/servicedesk/customer/portal/1/group/1/create/8","source":"direct"}
    buttonRadius203
    buttonShadowbuttonNewLink0
    emojiEnabledfalse
    buttonWidth260280


    How to create Buttons with Easy HTML macro

    Button group

    Social media buttons

    Download Buttons

    Loading buttons

    Learn more about Easy HTML