How to Customize a Button

How to build links, hover states, borders, sizing options and more

Felix Higgs avatar
Written by Felix Higgs
Updated over a week ago

There are various ways to customize buttons in your email.

When a user clicks on a button, you can make it:

  • Open a web page. A website address is required.

  • Send an email. A mail to email address, subject and body is required.

  • Make a call. A phone number is required.

  • Send SMS. A phone number is required.

With buttons, you can customize the:

  • Font. Select the type of font you want for the button.

  • Text Color and Button Color. You can easily select your brand's primary, secondary or link color or any other color of your liking.

  • Text Size. Choose the size of the text inside the button.

  • Text Styles. The text can be regular, bold, italics or underlined.

  • Button Width. As a default, the button width will be set to auto which means it will fit the width of the text. You can uncheck 'Auto' and set the width of the text as a % of the section.

    • To set a separate button width for mobile and desktop, add two buttons, set one to hide on desktop and the other to hide on mobile under the 'Responsive Options'. Set the preferred widths for each.

  • Text Align. The text inside the button can be aligned to the left, center, right or justified.

  • Align. The button itself can be aligned (left, center, right) within the column.

  • Line Height. This sets the distance between lines of text.

  • Button Corners. Changing the number will determine how round the corners of the button will be. 0 will be square and 100 will be rounded completely.

Highlight on hover

When this box is checked, the button will be highlighted when the mouse cursor hovers over the button.

When the cursor is not hovering over the button:

When the cursor is hovering over the button:

Padding

Inner padding can be changed to customize a button. This will create space around the text to the button.

Outer Padding can also be changed which will create more space around the button itself.

If you'd like padding to be different for each side around the text and button, selecting More Options which will allow you to customize the button further.

Border

A border can be added to button to further customize the look.

The border of the button can be:

  • Solid, Dotted or Dashed

  • Different colors including the Primary, Secondary and Link colors to keep branding consistent.

  • The thickness of the border can be increase.

More options allows you to change the side of each border's type, color and thickness.

Responsive Options

Buttons can be hid on mobile or desktop by clicking the either option.

Troubleshooting Button Links

When setting tel: and sms: links, you may encounter issues with some email clients not prompting a call or text. Support for these links may vary depending on the email client. Below is a table of how these links function in each major email client:

iOS & Apple Mail

Gmail WebMail

Gmail App

Yahoo & Yahoo App

Outlook.com & Outlook Apps

Outlook (Windows)

Outlook (Mac)

Call Button

✔️ Works

✔️ Works

Retained but requires long press and then select “Call ___”

Button remains but is not clickable

✔️ Works

✔️ Works, phone-capable app needed on PC to make the call

✔️ Works

SMS Button

✔️ Works

Button remains but is not clickable

Button remains but is not clickable

Button remains but is not clickable

Button is removed

Retained, but displays a security warning when clicking. SMS-capable app needed on PC to send an SMS.

Button remains but is not clickable

Call Link

✔️ Works

✔️ Works

Retained but requires long press and then select “Call ___”

Text remains but is not clickable, link styling is retained (eg any underline or color)

✔️ Works

✔️ Works, phone-capable app needed on PC to make the call

✔️ Works

SMS Link

✔️ Works

Text remains but is not clickable, link styling is retained (eg any underline or color)

Text remains but is not clickable, link styling is retained (eg any underline or color)

Text remains but is not clickable, link styling is retained (eg any underline or color)

Text remains but is not clickable, link styling is lost

Retained, but displays a security warning when clicking. SMS-capable app needed on PC to send an SMS.

Text remains but is not clickable, link styling is retained (eg any underline or color)

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

Did this answer your question?