The Button Element in ClickFunnels is a very useful tool and is essential for any form.
However, you can also use the button to add a quick link to a page as well as use it to toggle content.
This article will explain the properties of buttons on a page and how to use them.
1) Element Name: The element name allows you to use a custom designation for your element. This is helpful for identifying the element in the list of elements on the page.
2) Element ID: The Element ID is automatically assigned when the element is created. This cannot be changed.
3) Visibility Settings: Select whether the element will display on All Devices, Desktop Only, or Mobile Only.
4) Margin Top: Use this setting to designate the amount of space at the top of the element.
5) Text: This is the main text for your button; your Call To Action
6) Sub Text: This is the second line of text for your button. (Optional)
7) Button Action: This is where you will determine what your button will do. You can set the button to link to a URL or perform an action such as opening the popup or submitting the form. You can also set it to show or hide elements on the page.
8) URL / Action: If you set the button to URL Action in the previous step, you can paste a URL here or set an action. Actions include #submit-form, #next-url#, #open-popup, and more. You can learn more about button actions in this article. If you include a URL, please make sure it is the entire URL, including the HTTPS:// or HTTP://
9) URL Target: If you are linking your button to a page URL, you can toggle this setting to open the URL in the same tab (Normal) or in a new tab.
10) Text Color: Change the text color
11) BG Color: Change the button color
12) There are some new button styles made available in a recent update
13) Style / Theme: Select the style / theme for your Button.
14) Size: Choose the button size
15) Padding: Choose the padding inside the button. This is the space between the text and the internal border of the button.
16) Button Width: Choose whether the button will adjust dynamically to fit the text or fill the width of the column in which it is placed.
17) Font: Choose the text font for your button.
18) Inline / Block: Choose whether the button will display inline or block.
19) Button Align: Choose the alignment for your button.
20) Icon: Select the icon that will display next to your main button text.
21) Icon Align: Select the position for your button.
22) Text Shadow: Choose a shadow for the text on your button.
23) Box Shadow: Choose a shadow for the button itself.
24), 25), 26) Timed Delay: Use these settings to set a time delay entry for your element.
27), 28), 29) Animations: Use these settings to make your element animated when the page loads or on scrolling to the element.