Creatio base
This documentation is valid for Creatio version 7.16.0. We recommend using the newest version of Creatio documentation.

Button

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.

Fig. 1 Adding a CTA button

adding_button_from_toolbar.gif 

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

scr_button_setup_area.png 

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.

[Content builder font set] – select the font family of the button from the list of registered font families. To modify the list of fonts used in your template, update the “Content builder font set” lookup. Read more in the “Updating available Content Designer fonts” article.

[Size, px] – specify the width and height of the font in pixels.

Click font_color_picker.png to open the color picker and select the font color.

[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 btn_alignment_horizontal_left00039.png, center btn_alignment_horizontal_center00040.png, or right btn_alignment_horizontal_right00041.png). Vertical alignment (top btn_alignment_vertical_top00042.png, middle btn_alignment_vertical_middle00043.png, or bottom btn_alignment_vertical_bottom00044.png) aligns the text of the button.

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 border_color_picker00045.png to open the color picker and select the background color.

Borders

Configure the borders of the button.

Border style settings are disabled by default. Select the checkbox (3) to enable them.

Click border_color_picker00046.png to open the color picker and select the border color.

Update the icon_border_width00047.png field to specify the border width. To hide the border, select the “Hidden” border style.

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:

  • border_style_hidden00048.png – Hidden

Note

The border is defined but invisible. The border width effectively equals 0.

  • border_style_dotted00049.png – Dotted

  • border_style_dashed00050.png – Dashed

  • border_style_solid00051.png – Solid

  • border_style_double00052.png – Double

  • border_style_groove00053.png – Groove

  • border_style_ridge00054.png – Ridge

  • border_style_inset00055.png – Inset

  • border_style_outset00056.png – Outset

Select or clear [Top], [Bottom], [Left] and [Right] checkboxes to enable or disable the border style settings for the corresponding border.

Next

Text

Did you find this information useful?

How can we improve it?