---
title: Add a Button with the Rich Content Editor
description: Add a Button to trigger actions or redirect users to different content.
locale: en-US
canonical_url: https://www.servicenow.com/docs/r/australia/employee-service-management/employee-experience-foundation/ec-rich-content-button.html
release: australia
product: Employee Experience Foundation
classification: employee-experience-foundation
topic_type: task
last_updated: "2026-03-12"
reading_time_minutes: 6
breadcrumb: [Microsites, Creating employee communications, Authoring and managing employee communications, Employee Center Pro, Unified Employee Experience, Employee Service Management]
---

# Add a Button with the Rich Content Editor

Add a Button to trigger actions or redirect users to different content.

## Before you begin

Role required: sn\_cd.content\_manager

Fill in the New content form fields. See [Create rich content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-content-library-portal-rich-content.md)

Create the page layout using modules or columns.

-   Modules are predefined content layouts comprised of header, paragraph text, and images. See [Add predefined content layouts with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/add-modules-rich-content-editor.md)
-   Columns are containers that enable you to define a custom layout. See [Add columns with the Rich Content Editor](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-rich-content-canvas.md)

## Procedure

1.  Navigate to the canvas by selecting the **Open editor** button from the **Design** tab of the **New content** form.

    \[Omitted image "ecpro-open-editor.jpg"\] Alt text: Open the Rich Content Editor from the Design tab

2.  From the **Rich Content Editor** canvas, you can use a drag-and-drop method to add a button.

3.  Navigate to **Settings** tab.

    \[Omitted image "ecpro-settings-tab.jpg"\] Alt text: Settings tab on the side of the canvas has styling configurations

4.  See full configration settings options.

    \[Omitted image "ecpro-settings-tab-details.png"\] Alt text: Configuration options under the settings tab

5.  Use any of the following styling settings:

    **Note:** Changing the button type or size will clear all other setting properties and values. The background-color layer will be removed when changing the button type, and some values might be affected by button size selections, such as font size, line height, padding and border radius.

<table id="table_zx2_tgw_jyb"><thead><tr><th>

Settings field

</th><th>

Description

</th></tr></thead><tbody><tr><td colspan="2">

Styling

</td></tr><tr><td>

Button type

</td><td>

Defines what kind of button you are adding. Your choices are:-   Primary \(default\)
-   Secondary
-   Link only

**Note:** All properties and background color layers will be cleared when changing the button type.

</td></tr><tr><td>

Button size

</td><td>

Defines the size of your button. Your choices are:-   X-Small
-   Small
-   Medium \(default\)
-   Large

**Note:** All button size properties will be cleared when changing the button sizes.

</td></tr><tr><td>

Display

</td><td>

Configure the appearance of multiple components within the same column, such as an image and a text component. Select from the following options:-   **Top and bottom** \(default\): Image appears above the other component.
-   **Side by side**: Image appears with the other component next to it.
**Note:** For best results, set the same display for the components. For example, if you have an image and text components in a column and want the image to appear on the left and the text to appear at the right, change the **Display** settings for both components to **Side by side**.

</td></tr><tr><td>

Horizontal align

</td><td>

Sets the button alignment. Choose from left, center, or right.

</td></tr><tr><td colspan="2">

Advanced styling

</td></tr><tr><td>

Button color

</td><td>

Change the color of your button. 1.  Enter the color code that represents the background color you want to appear.

**Note:** All HTML colors are supported. For more information, see [HTML color names](https://htmlcolorcodes.com/color-picker/).

2.  Or, you can select the color picker \(grey square\) to the right of the **Background Color** field.
3.  Click into the color palette that appears.
4.  After selecting a color from the color palette, use the slide bar on the right side to fine tune your color.
5.  Slide the bar up and down.
6.  Use the bottom slide bar to lighten or darken your color.


</td></tr><tr><td>

WidthHeight

</td><td>

Adjust the width and height of a button by selecting it and using the **Width** and **Height** drop-downs to enter number or use the up and down arrows.You can also choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows. The choices are:

-   auto: Size is based on the content within the tab. If you enter additional text in the tab, the width automatically increases.
-   px: Use pixels as your measurement.
-   %: Use a percentage as your measurement.


</td></tr><tr><td>

Margin

</td><td>

Adjust the margins or the space outside and around the button.Use the drop-downs under the **Margin** section to adjust the margins on the top, bottom, right, and left sides. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.

</td></tr><tr><td>

Border

</td><td>

Edit the border around the outside of the button.**Note:** The border is the outline around the button.

 Width: Use the up and down arrows to adjust the width of the border. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.

 Style: The format of the border around the button. Select the drop-down to select the type of border you want around the button.

 Color: The color of the border around your button. Select the color of your button using the color palette and slide bars similar to how you select your background color.

</td></tr><tr><td>

Border radius

</td><td>

Use the up and down arrows to adjust the radius of the border. Just like the width and height, you can choose the unit of measure you prefer by selecting the single down arrow key to the left of the up and down arrows.

</td></tr><tr><td>

Font name

</td><td>

Defines the font face used to render characters.Click the drop-down arrow to select a different font.

</td></tr><tr><td>

Font size

</td><td>

Sets the size of the font.

</td></tr><tr><td>

Font weight

</td><td>

Determines how bold or light your text appears.Click the drop-down arrow to select a different weight.

</td></tr><tr><td>

Line height

</td><td>

Sets the vertical distance between two lines of text.

</td></tr><tr><td>

Font color

</td><td>

Overrides the font color from your portal theme.To select a color, enter the hex code or click the color picker \(grey square to the right of the font color\) and select a color from the color palette.

</td></tr><tr><td colspan="2">

Properties

</td></tr><tr><td>

Button label

</td><td>

Text that appears on the button.

</td></tr><tr><td>

Title

</td><td>

Text that appears when a user hovers over the button.

</td></tr><tr><td>

URL

</td><td>

Location of a web page or content. Enter the complete URL address you are targeting when a user selects the button.

</td></tr><tr><td>

Target

</td><td>

Indicates where the button directs the user. Your choices are:-   This window: Selecting the button opens the content in the same window you have displayed.
-   New window: Selecting the button opens the content in a new window.


</td></tr></tbody>
</table>6.  Select **Save** or **Save and Finish**.

    Selecting **Save** saves your content and you remain on the **Rich Content Editor** canvas. Selecting **Save and Finish** saves your record and returns you to the **New content** form.


## What to do next

-   \(Optional\) Translate your content.

    Request language translation for your content. For more information, see [Multilingual support in the Content Library](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-switch-language.md).

    **Note:** Only translate content after you are done modifying the content. For best results, we do not recommend that you add or remove components or change the formatting after translation.

    To create rich content that is formatted differently in different languages, duplicate the content and modify the formatting as needed. Then, use Audiences to target the content to users by language. See [Audiences](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ecpro-audience.md)

-   Preview your content from the **Publish** tab.

    **Note:** Content Preview is designed to provide a general idea of how your content looks. Content may look different once published due to variations in device resolution, theme difference, or mobile app style configuration.

-   Configure a publish plan to control where the content is delivered, the audience, and the period of time it is available: [Create a publish plan for your content](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/employee-service-management/employee-experience-foundation/ec-content-library-publish2.md).