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.

  • 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.

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?