Button

The Button macro allows you to create stylized buttons that hyperlink 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. They 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.

For security reasons, some browsers may block URL paths pointing to files on a local file system or local networked folders. You can override this in your browser’s security settings, but it should only be done as part of a comprehensive security strategy. It is usually best to host such files on dedicated web servers that use other protocols, such as FTP. More information can be found in Atlassian’s documentation.

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 anchor's name 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 palettes, you can customize the color of the background and text to be exactly what you want. 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.

Changing the color palette will change the presented options.

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.

On this page