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.

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.

Button link settings panel showing link type selection.

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 ContactID, 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.

  • Text Size - Adjust the button text size.

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

  • Button Color – Select the background color of the button.

  • Text Styles - Apply:

    • Bold

    • Italic

    • Underline

  • Letter Spacing - Adjust spacing between letters

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

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.

Outer Padding

Adds space around the button element.

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.

Enable Hover Effects

Hover effects highlight a button when the cursor moves over it.

Steps:

  1. Select the button element.

  2. Enable Use hover effects.

    Hover effects toggle highlighted.

  3. Customize hover styling if needed.

This helps draw attention to important calls to action.

Hover effects view in the email builder.

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:

  • If your email is sent through Marketo, Marketo may attempt to track phone (tel:) link clicks. This can cause the link to redirect to a browser page before the device starts the phone call.

  • Resolution: Enable Disable Tracking in the link's Link Options. When you sync or download your email for Marketo, Knak automatically prevents Marketo from tracking the phone link.

    Disable Tracking option in the Link Options panel.

If you do not see the Disable Tracking option, contact Knak Support to enable Platform Link Tracking for your account.

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)

✅

✅

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 using the chat bubble in the bottom right corner or email support@knak.com.

Related Articles
Did this answer your question?