Use the Button Macro

Create stylized buttons for hyperlinks to other pages or websites.The Button macro allows you to create stylized buttons which provide hyperlinks to other pages or websites. These can be added individually anywhere on a page or grouped as a horizontal row of button links using the Button Group macro.

Although hyperlinks can be created through the standard Confluence interface, buttons provide stronger visual integration with the application as a whole and can be used to create pages that feel like part of Confluence itself.

Add a Button to your page

1. Navigate to the page you want to edit.

2. Click the Edit icon.

3. Click Insert > View More in the Confluence editor, then select the Button macro in the Select Macro screen. (Alternatively, use / and begin to type button to access the macro via the quick insert menu.)

4. In the button editor:

   1. Add Button text. This is the text that will appear on the button.
   2. Choose a destination for your button. This can be a webpage or a page inside Confluence.

5. Click Save. A macro placeholder is displayed on the page.

   

6. Click Publish to view the rendered button on the page.

Edit your button

To change the macro, click the macro placeholder, then click the Edit icon. Make the required changes, then click Save.

 Add a destination to your Button

You can use a button to link to a Confluence page on your site or to an external webpage. 

Link to a Confluence page on your site

In the button editor select Search Page, then type in the Confluence page field. The field will search for matching Confluence pages, which you can then select from the drop-down. To only see pages from the same space select the check box above the search box. 

Link to a URL

In the button editor, select Add Link, then type the full web address in the Enter URL field.

Link a button to a specific place on a page

You can combine the button macro with confluence's anchor macro to link to a specific point on a page. 

Link to a location on the same page

1. Add an anchor macro to the page.
2. Give the anchor macro a name eg. notes.
3. Use the name of the anchor macro as the Destination for the button macro. Do this by putting #name. eg #notes.

Link to a location on a different page

1. Add an anchor macro to the page.
2. Give the anchor macro a name eg. notes.
3. In the Destination field of the button macro, select the page with your anchor macro. Then, add the name of the anchor to the end of the URL.
   eg.  sitename.domain/wiki/Project+seven#notes

Make Button open a new tab

If you don't want readers to leave the page when they click on a button, you can make it open a new tab when selected. To do this, select the Open in a New Tab check box.

Change the alignment of your Button

There are three options for aligning your button: Left, Centre, and Right. You can select these options in the Button editor. 

Change the appearance of your Button

There are two main ways to change the appearance of your button. You can use one of the preset button types shown below or customize your button's appearance.

Customize your Button color

Using color pallets, you can customize the color of the background and text to be exactly what you want. You can select from one of the options shown. If you don't see the color you want, select the Paint bucket button: to open a color picker and choose any color.

Add an icon to your Button

You can add an icon to your button to help show what it is for and to add some personality to your buttons. To add an icon select Add icon from the bottom of the editor.

This opens the icon libraries. You can select any icon from the four libraries. 

You can change an icon after adding it to a Button. Select the pencil icon to choose a different icon. Select the trash icon to remove it.

Example button Designs

Here are just a few examples of the button designs you could make.

Button Group Macro

Used in conjunction with the Button macro, the Button Group macro allows you to create stylized button groups. You can create a horizontal toolbar-like group of hyperlinks or a vertical page tree-like group.

Add a Button Group macro to your page

1. Navigate to the page that you want to edit.

2. Click the Edit icon.

3. Click Insert > View More in the Confluence editor.

4. Select the Button Group macro in the Select Macro screen.

5. Choose the direction of the buttons from the Button Group Direction dropdown. They can be Vertical or Horizontal. The default is horizontal.

6. Choose your preferred Button Group Alignment. They can be Left, Centre, or Right. The default is Left. 

   

7. A macro placeholder is displayed.

   

8. Insert a Button macro for each button you want to add into the macro placeholder, e.g. add a Button macro for Email, Search, and Edit. Buttons are arranged in the order shown within the Button Group macro. You can change the order later by dragging the macro placeholders to the desired positions.

   

9. Click Publish to view the Button Group rendered with the button links. In the example below, standard, primary, and subtle style buttons were added to the Button Group.

10. Click the buttons to test the link destinations and behaviors, e.g. if they open in a new tab.

    

Direction Examples

Horizontal Direction

Vertical Arrangement

Edit the macro

To make changes to the macro, for example, to add or remove a button or to change the tooltip text, click the Button Group macro placeholder then click the Edit icon. Make the required changes, the changes save automatically.