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.
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
Click Admin → Integrations → Merge Tags.
Create a Merge Tag.
Open your email or landing page in the Builder.
Click the Button element.
Add your URL link.
Click the Tag icon to select your Merge Tag.
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
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 the email layout.
Button Width
By default, button width is set to Auto. This matches the width of the text.
To customize width:
Uncheck Auto.
Set width as a percentage of the section.
Mobile and Desktop Width
To use different widths for devices:
Add two buttons.
Configure one button for desktop.
Configure the second for mobile.
Use Responsive Options to hide each version on the opposite device.
Alignment Options
Text Align – Align text inside the button:
Left
Center
Right
Justified
Button Align – Align the button within the column:
Left
Center
Right
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
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.
Enable Hover Effects
Hover effects highlight a button when the cursor moves over it.
Steps:
Select the button element.
Enable Use hover effects.
Customize hover styling if needed.
This helps draw attention to important calls to action.
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.
Troubleshooting Button Links
Some email clients treat phone and SMS links differently.
Link Type | Notes |
Call ( | Works on most mobile devices. |
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.
Email Client Support for Call and SMS Links
Feature | iOS / Apple Mail | Gmail Web | Gmail App | Yahoo / Yahoo App | Outlook.com / Outlook Apps | Outlook -Windows | Outlook -Mac |
Call Button | ✔️ Works | ✔️ Works | Long press → “Call” | Visible but not clickable | ✔️ Works | ✔️ Works* | ✔️ Works |
SMS Button | ✔️ Works | Visible but not clickable | Visible but not clickable | Visible but not clickable | Removed | Security warning* | Visible but not clickable |
Call Link | ✔️ Works | ✔️ Works | Long press → “Call” | Text only (not clickable) | ✔️ Works | ✔️ Works* | ✔️ Works |
SMS Link | ✔️ Works | Text only (not clickable) | Text only (not clickable) | Text only (not clickable) | Text only (no link style) | Security warning* | Text only (not clickable) |
* Requires a phone or SMS-capable application installed on the computer.
Need more help? Contact support via live chat using the chat bubble in the bottom right corner or email support@knak.com.