Skip to main content

How to Customize a Button

Learn how to configure button links, styles, spacing, and responsive settings in the Knak email and landing page builder.

Buttons are key call-to-action elements in your email or landing page. In Knak, you can customize button links, appearance, spacing, and behavior to match your brand and design requirements.

Customize Button Links

You can configure different link actions for a button depending on the user interaction you want.

Add a Link Title

Use the Title field under Button link to name your link. Some browsers and email clients show the title when someone hovers over the button.

Link Types

When someone clicks your button, you can set it to:

  • Open a web page – Enter a website URL.

  • Send an email – Use a mailto: link with an email address, subject, and body.

  • Make a phone call – Use a tel: link with a phone number.

  • Send an SMS – Use an sms: link with a phone number.

  • Custom Links (currently in beta testing): Reusable URLs that use variables to personalize a destination. Learn more: Custom Links Management.

  • Open in app: Opens the link in your mobile app instead of a web page. Available for SparkPost, and for Braze set up to use SparkPost or SendGrid link formatting.

    • SparkPost, or Braze with SparkPost link formatting: Fill in the data-msys-sublink field.

    • Braze with SendGrid link formatting: Turn on the Universal Link toggle.

Button link settings panel showing link type selection.

Link Options for Your Account

Some link options only show if your account has them turned on. You may see:

  • URL tagging: Add tracking parameters to the button link.

    • Enter each one as name=value, for example utm_source=newsletter. Knak adds them to the end of the link.

    • These are often Urchin Tracking Module (UTM) parameters, which help you track where clicks come from.

  • Exclude from global URL parameters: Turn this on to stop your account’s global URL parameters from being added to this link.

  • Link tracking: Turn your platform’s link tracking on or off for this button.

  • Exclude from iOS Universal Links: For Salesforce Marketing Cloud (SFMC) users. Turn this on to make the link open in a web browser on iOS devices, even if the reader has your mobile app installed.

Use Merge Tags in Button Links

This is commonly used for personalization, tracking, or passing contact information to a landing page.

How Knak Merge Tag Tokens Work

Tokens use the format:

{{!TagName!}}

The TagName comes from the Merge Tag name created in Knak.

For example, if you create a Merge Tag named LeadCountry the token used in your link becomes:

{{!LeadCountry!}}

This token references the Lead Country Merge Tag configured in Knak.

Add a Merge Tag to a Button Link

  1. Click Admin → Integrations → Merge Tags.

  2. Create a Merge Tag.

    Merge Tag settings page showing the Tag Name and Merge Tag Syntax fields.

  3. Open your email or landing page in the Builder.

  4. Click the Button element.

  5. Add your URL link.

  6. Click the Tag icon to select your Merge Tag.

    Button settings panel showing a Merge Tag inserted in the Link URL field.

Note: The Merge Tag is inserted at the end of the URL currently in the field.

  • If the field is empty, the Merge Tag appears at the start of the link.

  • If a URL already exists, the Merge Tag is added after the existing link.

  • If multiple Merge Tags are added, each new tag is placed after the previous one.

Example button link:

https://example.com/register?id={{!LeadCountry!}}

When the email sends, the token is replaced with the recipient’s actual value.

Example result:

https://example.com/register?id=Canada

Use Merge Tags in Button Text

You can also insert Merge Tags directly into the button label to personalize the text that recipients see.

For example:

Button Text

Recipient Sees

Register, {{!FirstName!}}

Register, Sarah

View Your {{!CompanyName!}} Dashboard

View Your Knak Dashboard

Add a Merge Tag to Button Text

  1. Open your email or landing page in the Builder.

  2. Select the Button element.

  3. Click inside the Button Text field.

  4. Place your cursor where you want the Merge Tag to appear.

  5. Click the Tag icon.

  6. Select the Merge Tag to insert it.

    Button settings panel showing a Merge Tag inserted into the Button Text field.

Customize Button Text and Typography

You can adjust the text style to match your email design.

Button Text and Styling

  • Font: Select the font family.

  • Text Color: Choose brand or custom colors. Set one color for light mode and one for dark mode.

  • Text Size: Adjust the button text size.

    • Click the Desktop or Mobile icon to set different values for desktop and mobile views.

  • Line Height: Adjust the space between lines of text.

    • Click the Desktop or Mobile icon to set different values for desktop and mobile views.

  • Button Color: Select the background color of the button. Set one color for light mode and one for dark mode.

  • Text Styles: Apply:

    • Bold

    • Italic

    • Underline

  • Letter Spacing: Adjust spacing between letters.

  • Text Direction: Choose Left to right or Right to left. Use right to left for languages like Arabic and Hebrew.

Note: If your button text uses more than one font size, the panel shows a warning. Click Standardize font size to use one size for all the text.

Dark Mode Colors

Dark mode shows emails with a dark background. Some email clients use your dark mode colors when the reader has dark mode turned on. Set a dark mode Text Color and Button Color so your button stays easy to read. Learn more: Using Borders on Buttons in Dark Mode.

Adjust Button Size and Alignment

Control how the button appears inside your email layout.

Button Width

By default, Button Width is set to Auto. This matches the width of the button text.

To customize the button width:

  1. Click Custom.

  2. Choose how you want to set the width:

    • Percentage (%): Set the button width as a percentage of the section width.

    • Pixels (px): Set the button to a fixed width in pixels.

  3. Enter the width value.

Button Width settings showing Auto, Percentage (%), and Pixels (px) options.

Mobile and Desktop Width

You can set different button widths for desktop and mobile.

To use different widths for each device:

  1. Configure the button width.

  2. Click the Desktop/Mobile icon next to the width field.

  3. The width setting expands into separate Desktop and Mobile width fields.

  4. Enter a width value for Desktop.

  5. Enter a width value for Mobile.

Width field before and after clicking the Desktop/Mobile icon

Alignment Options

  • Text Align – Align text inside the button:

    • Left

    • Center

    • Right

    • Justified

  • Button Align: Align the button within the column:

    • Left

    • Center

    • Right

Tip: Click the Desktop or Mobile icon to set a different alignment for desktop and mobile views.

Button attributes alignment styling options.

Adjust Spacing with Padding

Padding controls spacing inside and around the button.

Inner Padding

Adds space between the text and button edges.

Note: Inner padding does not have separate desktop and mobile settings. The inner padding value you set applies to both views.

Outer Padding

Adds space around the button element.

Click the Desktop or Mobile icon to set different padding for desktop and mobile views.

Advanced Padding

Enable More Options to control padding for each side:

  • Top

  • Right

  • Bottom

  • Left

Padding settings with advanced spacing controls.

Add Borders and Corner Radius

You can add borders to create more visual emphasis.

Border Options

Customize the following:

  • Border Style

    • Solid

    • Dotted

    • Dashed

  • Border Color

    • Primary

    • Secondary

    • Link color

    • Custom color

  • Border Thickness

Rounded Corners

Use Button Radius to round the corners.

Examples:

Radius

Result

0 px

Square corners

25 px

Rounded button

Advanced border settings allow different styles or widths per side.

Border settings and radius control.

Note: Some versions of Outlook use the top-left corner value for every corner. If your corners have different values, the panel shows a warning. Use the same value on all corners if your readers use Outlook.

Enable Hover Effects

Hover effects highlight a button when the cursor moves over it. This helps draw attention to important calls to action.

  1. Select the button element.

  2. Enable Use hover effects.

    Hover effects toggle highlighted.

  3. Set your hover colors.

  4. When Use hover effects is on, you can set:

    • Text Color: The text color when the cursor is over the button.

    • Button Color: The background color when the cursor is over the button.

    Hover effects view in the email builder.

Add an Anchor Target (Landing Pages Only)

An anchor target lets other links on your page scroll straight to this button.

  1. Select the button element.

  2. Open Anchor Target.

  3. Enter a Name. Use a short name with no spaces.

  4. Enter an Offset top value. This adds space between the top of the screen and the button after the page scrolls.

    Button link attributes with anchor link set up.

Note: Anchor Target is not available for buttons inside a carousel.

Configure Responsive Options

You can control when a button appears depending on the device.

Available Options

  • Hide on mobile

  • Hide on desktop

Use this feature when you need different layouts or button sizes for each device.

Responsive options in the attributes panel.

Troubleshooting Button Links

Some email clients treat phone and SMS links differently.

Link Type

Notes

Call (tel:)

Works on most mobile devices.

SMS (sms:)

May not trigger SMS in all email clients.

Desktop Clients

Some require a phone or SMS application installed.

Testing your email across clients is recommended to confirm behavior.

Note for Marketo users:

Knak does not apply Marketo link tracking to tel links by default. This prevents an issue where some Android devices may interpret tracking parameters as part of the phone number, causing calls to fail. Learn more in Adobe's documentation.

Email Client Support for Call and SMS Links

* Requires a phone or SMS-capable application installed on the computer.

Call (tel:) Support

Email Client

Button

Link

Apple Mail (iOS)

✅

✅

Gmail Web

✅

✅

Gmail App

Long press → Call

Long press → Call

Yahoo Mail

Visible only

Text only

Outlook.com / Outlook Apps

✅

✅

Outlook (Windows)

✅*

✅*

Outlook (Mac)

✅

✅

Using an Extension in a Phone Link

You can include an extension in a phone (tel:) link. How the extension is handled may depend on the device or phone service used to make the call.

Try adding a semicolon (;) between the phone number and extension:

613-555-5555;123

If the semicolon does not work as expected, try a comma (,):

613-555-5555,123

Test the phone link on your target devices before sending your email. Confirm that the call connects and the extension is entered correctly.

SMS (sms:) Support

Email Client

Button

Link

Apple Mail (iOS)

✅

✅

Gmail Web

Visible only

Text only

Gmail App

Visible only

Text only

Yahoo Mail

Visible only

Text only

Outlook.com / Outlook Apps

Removed

Text only

Outlook (Windows)

Security warning*

Security warning*

Outlook (Mac)

Visible only

Text only

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.

Related Articles
Did this answer your question?