Button Element

Buttons are an essential element to any ClickFunnels page. Buttons can be set to allow visitors to submit an opt-in form, go to another page, trigger content to show/hide, etc. 

Prior to getting started, you will need the following:

• Clickfunnels Page.

Step 1: Add Button Element

• Click on Add New Element from within a row or click on the "+" below an existing element.
• Search or Select the Button Element.
• Click on the Gear icon on the button element orange border to open the settings.

Step 2: Edit Settings

• Click on the Gear icon on the button element orange border to open the settings.
• Set the Button Action
  • Submit Order/Submit Form - capture input field information and move to the next step in the funnel.
  • Open the Pop-Up - Opens the pop-up on the page.
  • Facebook Opt-In - the ability for customers to opt-in with Facebook.
  • Go To Website URL - takes customers to a website URL (be sure to use https://)
  • Go To Next Step In Funnel - goes to the next step in the funnel, does not capture information on the page (if you want to capture the input fields be sure to use Submit Order/Submit Form).
  • Scroll To Row/Section On-Page - Scroll to the desired section (highlighted in green boxes) or row (highlighted in blue boxes) on the page.
  • Show/Hide Action - shows or hides the elements you select.

Adjust the additional button Settings as desired.

• Top Margin - Add space above your element.
• Set Action - Choose what you want the button to do.
• Button Text - Choose the text that appears on the button.
• SubText - Choose the subtext that appears on the button.
• Aria-Label - Add descriptive text to your button.
• Font Family - Change the font of the text.
• Font Size - Change the size of the text
• Mobile Size - Change the size of the text on mobile devices.
• SubText Size - Change the subtexts size
• Mobile Sub Size - Change the subtexts size on mobile devices.
• Text Color - Change the text color using the Color Picker.
• BG Color - Change the background color using the Color Picker.

Advanced Style Settings

• Button Width - Choose if the width of the button should be based on the amount of text or the size of the row/column it's in.
• Inline / Block - Adjust the justification for the element.
• Style - Choose from custom or "Line Flat".
• Vertical Space - Adjust the space above/below the element.
• Horizontal Space - Adjust the space to the left/right of the element.
• Corners - Adjust the amount of rounding around the edges of the button.
• Border - Choose the size of the border.
• Box Shadow - Add a shadow around the element.
• Text Shadow - Add a shadow around the text.
• Text Transform - Quickly set all text, to Uppercase, Lowercase, or Capitalized.
• Letter Spacing - Change the space between each character of text.
• Icon Picker - Add an icon to the left of your text.
• Icon Picker (After) - Add an icon to the right of your text.
• Button Effect - Choose a built-in animation option.
• Button Align - Choose the justification for the button.

Advanced Animation

• Timed Delay - fade in or fade in with scale.
• Type - On page load or on page scroll for the delay that you have set.

If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.