> For the complete documentation index, see [llms.txt](https://docs.antsomi.com/cdp-365-user-guide-en/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/button.md).

# Button

After inserting a block in Live Preview, you can configure the settings

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfNF9IUkXvIaiR6Xwprlzb4akPO6mN0vXQsj1lVeCMhI0xP4tHfC0T8yFzEzuaybWekiRsn0KW3SJsCnAeqPjsB9c6ylSFLGVnQeUnAmwdD2p9H2svdVzmyTPiehgv3x7fUMGTS0wXuOGRxf-c4dJIM5iWa?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe9wEd8cRgVJzt5w2F2Rkov7vz4VZFSAnnOshZGQAd82aOuVKvLvR4VWDe0rht8IqyrhevEPDKs9NCrN8SpYWyxWN-r7GRHOHc6CrJDN5F4h__KiNcCU4ng42WIrlTZ65-EgEMHQMKaV-Zi_1QgDW5rWvXd?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

## Content

### Button

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdxW9XNdQ2QaEPgo5tnXnYa6LiPlenH2_q-kfZZ-QXIS4nOXj5hhJusr9kUVTSgsaKDkCZ1HaSyRtpBK2TBv7XFypr2gGFyeYskYcHR2bdeDpZqklMYrL2MgMfZ9hSlnks-l35UfcEYhUYM78MGKJt0dJQI?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### Button Text

The text displayed on the button&#x20;

#### Button Click Action

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdSbd94fA8WkhrGqQPeUvcJ9tBoqe5N-zCljFc9nvhfkhKhodWpo46-dGyIPm6Ix1rkFBR7qckIll5jVaB8pyKomMic135H_CQMf-NEEYSjh8F0SOz__5xrincvAZe3S4piPJGKOK_QSOXyk8u_grMZpP_t?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* ***Go to View***\
  Yes/No, Optin, or Success view
* ***Redirect an URL***
  * ***Static***: Enter text
  * ***Dynamic:*** Select field and index
* ***Open email client***: Enter the Email to
* ***Click to call***: Enter the Phone number
* ***Click to copy text:*** Enter the Text to copy to clipboard&#x20;
* ***Close the campaign***
* ***Reload the page***
* ***Open in the new window***
  * ***Static***: Enter text
  * ***Dynamic***: Select field and index

#### Width&#x20;

It allows you to change the width of the button in %

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcgkRsMSeUQCPrm__l6yPoWcSC2OFcM5rkLU5k4EUV40w2A5nX0v69wNFH10p3zrBjubb6PhQEA4kX9bsGBStRGym8yLKU5mCWA-3j_wypk_hfkZgL3yKyPTnDTvVwb2zX1NRFzfNJrS9fsg4Bd-8M5JBCe?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### Align

It allows you to change the alignment of the button (left, center, right)

#### Button Size

The size of the button includes X Small, Small, Medium, Large, X Large, X2 Large

### Success Scripts

It allows you to enter the scripts, the scripts that will load after the button has been clicked

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcjG894TQQyMOeMABRt_rbjUcZA48x8xWUPVcgP7YbPg7BfphMatwMp1za9rVyMafM9lWtE8tyJvhOzq4QxqM25-KGuWbHJWSE3OWbBWxAo31ZF_zFFJvOKoPWHUKuct8lx4b18ubb4CmOJeleYuD2j9J01?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

## Advanced

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf6I-W7_BMhqlMMEj9glR2rn8I8I9kc5xE-NtkiJa1p4NA4-oqxqh7guXpkf6DyQnS6_b-l9cA18HfPYdbZF_K3jrEMheGG8Jxdy-Rk2HY5ahPH6xELQYM871O0fjV_ez4qgPS_-kpts6BxOkktYL8fYM8x?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

### Button Styling

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcxDgtm5Elyu59OOGt-YkhpNzT8s7M3XipVkFI_BDtKfVI5X1t0Gg61_-KXjzx5xl0I4WbWaESP7e69OagmMJi6AziqIuU2qi8Gjr8La5DgW5HKs4cIigxEaUNXk9IEmGNL2ZsJUA1xZzCuGZKtE19WCzI?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### **Style (Background color)**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### Font Settings

It includes Font family, Font color, Font size, Font weight, Line height, Letter spacing, etc.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcKJJHVJkoRiLl6UmUL8M2peqWs-z9AJyZkF46_23NHETiuArW0wAEm0l1-i-23Ahpez1z0IwknZj71yDlCi7-8lDZP53qjLYdCfN2tTrjpTTtvqoCNjClgD7lQ4gF6GzfcgqruYNLWgcrUt7QG3JlcSOrv?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### Icon

You can configure the Icon color, size, spacing, etc.&#x20;

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe-GLdkmCO2Pxyh1VSpOjpAzLvdZDnIy8CuPAOW_SDeMZVlS0XhxkJzXYd-j4wWCCPJHaSUopG6BATMGomW2Pbg6KslItAcxHJZiKwzDuZOInSRR0Xe8Wa3t2ryeoGBBfMzfKpha_1q-4UGrFC0MdzTKSA?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

#### Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (***None, Light, Custom***)

#### Border

It allows you to specify the style, width, and color of an element's border

#### Rounded Corners

It allows you to define the radius of an element's corners

#### Spacing

* ***Inner Spacing (Padding)***: \
  Padding is inside of the border (or edge) of your element. If you increase the padding, it will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin)***: \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### Hover Styles

You can configure the ***Hover Styles*** by turning off the status of ***Default Hover Styles***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXcxaHh0u8Gf0_hrxIO2h1vFjV7IjdjH6P4VpyqlJNAxmncC-nqmGCZkMc3U5yX1kkXeBcMUE4h-rawHx0NqVW9wL-7AQlcW2vZ24jQukcf_BJIYjwhFt35E5YquQTJ3YC6gGR3AyXKIsFQuVb1tYUIqwvtP?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**a. Background color**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

**b. Icon color**

It allows you to change the color of the icon

**c. Font color**

It allows you to change the color of the text

#### **d. Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (***None, Light, Custom***)

#### **e. Border**

It allows you to specify the style, width, and color of an element's border

### Container Styling

#### Style

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

#### **Border**

It allows you to specify the style, width, and color of an element's border

#### **Rounded Corners**

It allows you to define the radius of an element's corners

#### **Spacing**

* ***Inner Spacing (Padding):*** \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin):*** \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### Position

It allows you to adjust the position of elements in the container

#### Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

#### Custom ID attribute

The ID of a block, which is used in ***Custom CSS, Custom Javascript***

#### Custom Class attribute

The class of a block, which is used in ***Custom CSS, Custom Javascript***

#### Hover Styles

You can configure the ***Hover Styles*** by turning off the status of ***Default Hover Styles***

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfypa8UU-my17k4wzXIdk5KddvziR1L0ti9FXxXS0iJTnwHlUrN_A9YB0mTzvc82bjQrVg63ZqinHpqS8HxfSGk-T7MEnLT5NZM5viiVO0TLE20wTg7k4mxJr_TrDg3CBRW6X-NsOe9UqvTIhsNFL-Gmgc?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

**a. Background color**

1. ***Solid***: Applies a single color uniformly within the whole of an object by selecting the ***Background color***
2. ***Gradient:*** It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the ***Gradient Style***:&#x20;
   * ***Linear***: Change the angle of the gradient
   * ***Radial***: Change the positioning (right center, left top, left center, etc)
   * ***First color & first color location***
   * ***Second color & second color location***

#### **b. Box Shadow**

It allows you to add shadow effects around an element's frame by selecting a shadow style (***None, Light, Custom***)

#### **c. Border**

It allows you to specify the style, width, and color of an element's border

#### **d.** **Rounded Corners**

It allows you to define the radius of an element's corners

#### **e. Spacing**

* ***Inner Spacing (Padding):*** \
  Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box
* ***Outer Spacing (Margin):*** \
  Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

#### f. Position

It allows you to adjust the position of the hover

#### h. Z-Index

* The z-index property specifies the stack order of an element
* An element with greater stack order is always in front of an element with a lower stack order

### Display condition

You can set the condition to display the button

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd9FZ0zFjZ-6WvyhKLjjQ6cE-b7wJVVEMPSWcQbAyHqhuwcINJe289SnsT6qlzVSuwQAeBTSZkW4ZUoFcq3zV_I4Ipoducs8XdPEyo7oUX1MoMEQG8c62XukjlF7gBDVsHauSBn9O3Z9n4rh8lhfSeNJe_O?key=McWN_Lv9ZK-QuQzVrY3nVw" alt=""><figcaption></figcaption></figure>

* ***Condition***: It includes ***None, Show when, Hidden when***
* ***Field***: It contains ***Business Object attributes***
* ***Index***: The number of the row in the ***Business Objects Data table***
* ***Operator***: It includes ***contains, does not contain, starts with, doesn't start with, ends with, doesn't end with***, etc.
* ***Value***: you can input the value or select an ***attribute from Business Object or Event***

{% hint style="info" %}

* The Business Object attributes in Field are selected Business Object in Template Setting

![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeIJoU8VxAB4xciY0laDfCm3MusyeODZc8u6mvQ1UjoMMawU_3mjf2PnsvIonqZ1i59oxSZcqwa1mF2hxnKwf_vWxwGIoy4__xLjqtSZtRyB3zyb9fG3hos_Mdb1i2FJq0ekHl79c2neEe7q3U4_A5ujxVK?key=McWN_Lv9ZK-QuQzVrY3nVw)

* If Business Object in Template Setting does not be selected, a popup of available ***Sources*** will appear

![](https://826840553-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbtU4vFUxT5JkWYHePuoX%2Fuploads%2FDiQEayOKQPZFhGG3EqWA%2Fimage.png?alt=media\&token=7f33b39b-b3b8-4ea8-b8a3-ef87c911473a)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.antsomi.com/cdp-365-user-guide-en/marketing-hub/media-template/settings/blocks-and-settings/button.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.