The Button Hyperlink macro allows you to create AUI-styled buttons which provide hyperlinks to other pages or websites. These can be added anywhere on a page, or to a Button Group macro to create a button array.

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

Instructions

  1. Navigate to the page that you want edit.

  2. Click  Edit.

  3. Click the location on the page where you want to add the button. This can be repositioned later by dragging the macro placeholder to the desired position. If you are adding it to a Button Group macro, click the Button Group macro placeholder.
  4. Click  Insert More Content Other Macros.

  5. Select the  Button Hyperlink  macro in the Macro Browser.

    The Insert Button Hyperlink Macro screen, with an example configuration.
  6. Define the button using the following parameters:

    ParameterDescriptionTypeDefaultRequired

    Title

    Enter the text to display on the button.

    string

    none

    (tick)

    Destination

    The page, URL or file which the user will be directed to when they click the button. The field will auto-complete for pages within the Confluence site, but can also take a full URL or file link , e.g.  file:///c:/read_me.txt . You may also specify an email destination, e.g.  mailto:someone@somewhere.com  which will launch the default email client when the button is clicked.

    string

    none

    (tick)

    Button Type

    Select the button type: Standard,  Primary, or  Subtle. See Style reference below for examples.

    The effect on these buttons will differ depending on whether they are on their own, or a part of a Button Group.

    single select

    standard

    (tick)

    Icon

    Select an icon option:

    • None: no icon is displayed on the button.

    • Preset: select from a list of Content Formatting icons. See the Icon Reference below.

    • Custom: select custom to use any AUI icon. See the AUI Icon examples for more information and to verify the correct icon name to enter in the Custom AUI Icon input field.

    single select

    none

    (tick)

    Custom AUI Icon

    Add the name of desired AUI custom icon as defined in docs.atlassian.com. Available icons are AUI version dependent.

    string

    none

    (error)

    ID

    Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the # selector.

    string

    none

    (error)

    Class

    Option to apply a custom CSS class to the element, for example, to change the button color or hover behaviour. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a  CSS Stylesheet macro  that you have added to your page.

    string

    none

    (error)

    Open Hyperlink in a New Tab

    Select this option to display the destination page in a separate tab.

    single select

    off

    (error)

  7. Click  Insert. A macro placeholder displays.

    A placeholder for the Button Hyperlink macro.
  8. Save your Confluence page to view the rendered button.
    email Send
  9. Test the link to confirm that it points to correct destination.

Some browsers may block URL paths that point to files on a local file system or local networked folders for security reasons. This can be overridden in your browser’s security settings, but should only be done as part of a comprehensive security strategy. In most cases, it is 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.

Style reference

Examples of the different styles available for the Button Hyperlink macro.

Icon reference

Icons may look slightly different depending on your version of Confluence.

A key to the icons available used in Confluence.

Example

The following example uses the view icon and has a CSS class applied using the Class parameter. Note the inclusion of !important in the CSS to override the default button style.


Example CSS-Class

.button-background {  
background: rgb(34,193,195);
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)!important;  
}  
TEXT

Example CSS-ID

#buttons {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0.3,0.6))!important;
}
TEXT

CSS Help

For more CSS examples, see w3school's CSS Tutorials. If you like gradients, try this gradient generator.