The [Button] element (Fig. 1) is designed for making clickable call-to-action buttons. [Button] elements are also referred to as a “call to action” (CTA) and are basically links presented as visually identifiable buttons.
Note
There is a difference between [Button] element and the HTML <button> element.
To insert the HTML <button> element, please use the [HTML] element.
Button setup area
Use the setup area on the right to configure the button text, background, and shape.
Fig. 2 Button setup area
| Property | Function |
|---|---|
| Breadcrumb navigation (1) | Use “breadcrumbs” at the top of the setup area to navigate the parent (column, section, banner, block, and template) elements. |
| Link to open | The URL specified in the [Link to open] area opens when a recipient clicks the button. |
| Font | Use this settings group to configure the font settings of the CTA button caption. [Font family] – select the font family of the button. Read more in the “Adding custom fonts” article. [Size, px] – specify the width and height of the font in pixels. Click [Line height, px] – specify the spacing between the lines and the borders of the button. The maximum height is 250px; the minimum line height cannot be less than the size of the font. [Letter spacing, px] – specify the spacing between the characters in pixels. |
| Size, px | Specify the width and height of the button in pixels. |
| Align | Align the CTA button horizontally (left Note Selecting various vertical alignment settings is likely to produce no visible effect when trying them with the default sample CTA button because of the insufficient height. |
| Margin, px | Specify the distance (in pixels) between the borders of the CTA button and the adjacent borders of parent and sister elements. In the Content Designer, you must specify the margin setting for each side individually. |
| Padding, px | Specify the distance (in pixels) between the CTA text and each of the borders of the container. Padding is specified separately for each side. |
| Corner radius | Specify the circular radius of the corners of the button. Leave this property empty for sharp corners. This defines the circular radius of all 4 corners of the button. Note Use the [HTML] element with inline or embedded CSS styles to specify elliptical corners and other exotic effects. |
| Background | Set the button background color. Background style settings are enabled by default. Clear the checkbox (2) to enable them. Select this checkbox to enable all background settings of the current button. Click |
| Borders | Configure the borders of the button. Border style settings are disabled by default. Select the checkbox (3) to enable them. Click Update the Use the dropdown menu (4) to select the border style. When the border settings are enabled, the “Solid” style is selected by default. The following styles are available:
Note The border is defined but invisible. The border width effectively equals 0.
Select or clear [Top], [Bottom], [Left] and [Right] checkboxes to enable or disable the border style settings for the corresponding border. |
, center 
, or right 
). Vertical alignment (top 
, middle 
, or bottom 
) aligns the text of the button.
field to specify the border width. To hide the border, select the “Hidden” border style.
– Hidden
– Dotted
– Dashed
– Solid
– Double
– Groove
– Ridge
– Inset
– Outset
