Call-to-action Buttons

Create eye-catching buttons to encourage readers to take action in your email campaigns. Use the Button content block in the Email Editor to guide recipients toward the next step, whether that means visiting your website, signing up for an event, or contacting your team. A clear and well-designed call to action can make a meaningful difference in how recipients interact with your email.

Before You Start

Before adding a button to your email design, it helps to:

Add a Button

To insert a button into your email design:

  1. Drag and drop a Button content block into the email canvas.

  2. Click the button and replace the default label text with your own call to action.

  3. In the left panel, open Link Settings and choose the tab that matches the type of link you want to add to the button:

Use this option to send recipients to a webpage or any other direct URL.

  1. In Link Type, select Absolute (URL).

  2. In Link target, enter the destination URL.

  3. Optionally add Tooltip.

  4. Enable link tracking if you want to measure clicks on the button.

Button link settings configured for an absolute URL.

Fig. 1. Configure a button with an absolute URL.

Use this option when the button should start a phone call on supported devices.

  1. In Link Type, select Click-to-call phone number (tel).

  2. In Telephone number, enter the phone number you want to use.

  3. Optionally add Tooltip.

Button link settings configured for a click-to-call phone number.

Fig. 2. Configure a button with a click-to-call phone number.

Use this option when the button should open a new email message.

  1. In Link Type, select Email link (mail-to).

  2. In Email address, enter the destination email address.

  3. Fill in Email subject and Email body.

  4. Optionally add Tooltip.

Button link settings configured for an email link.

Fig. 3. Configure a button with an email link.

Use this option when the button should act as an unsubscribe action in the email.

  1. In Link Type, select Unsubscribe link.

  2. Optionally add Tooltip.

Button link settings configured for an unsubscribe link.

Fig. 4. Configure a button with an unsubscribe link.

Customize a Button

Now that you have added your button, you can customize its text, color, size, and shape to make the CTA more visible and aligned with the rest of your email.

Change Button Color and Size

To change your button color and size, click the button to open its settings in the left panel. From there, choose the tab that matches what you want to adjust:

To change the button width:

  1. Click the button in the canvas.

  2. In the left panel, open Layout.

  3. Adjust the Width value until the button matches the size you want.

Changing the button width from the canvas or Layout section.

Fig. 5. Change the button width.

To change the button height:

  1. Click the button in the canvas.

  2. In the left panel, open Layout.

  3. Adjust the top and bottom padding to increase or decrease the button height.

Changing the button height by adjusting top and bottom padding.

Fig. 6. Change the button height.

To change the button color:

  1. Click the button in the canvas.

  2. In the left panel, open Background.

  3. Choose the button background color you want to use.

Changing the button color from the left panel settings.

Fig. 7. Change the button color.

Change Button Text Style

To customize the button label:

  1. Click the button text in the canvas.

  2. Use the in-canvas text toolbar to adjust the text appearance.

From there, you can change:

  • font family

  • font size

  • text color

  • inline formatting

  • attribute variables

  • emojis

To learn more about how the in-canvas toolbar works, see Customize Your Text with the Toolbar.

Editing button text formatting from the in-canvas toolbar.

Fig. 8. Change button text color, font, size, and format from the toolbar.

Add Rounded Corners

To add rounded corners to your button:

  1. Click the button in the canvas.

  2. In the left panel, open Borders.

  3. Adjust the rounded corner values to soften the button shape.

Adding rounded corners to a button from the Borders section.

Fig. 9. Add rounded corners to a button.

Add a Border

To add a border to your button:

  1. Click the button in the canvas.

  2. In the left panel, open Borders.

  3. Define the border size, style, and color.

Adding a border to a button from the Borders section.

Fig. 10. Add a border to a button.

Track Button Clicks

To track clicks on your button:

  1. Click the button in the canvas.

  2. In the left panel, open Link Settings.

  3. If the selected link type supports tracking, enable the Enable link tracking toggle at the bottom of the section.

When this toggle is enabled, contact.center records interactions with the button link so you can measure engagement with the call to action.

What’s Next?