Button Element

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

What you will need

• Clickfunnels Page. Click here to learn how to get started.

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.
• Edit the element and adjust the 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.
• Sub Text - Choose the sub text that appears on the 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.
• Sub Text Size - Change the sub texts size
• Mobile Sub Size - Change the sub texts 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.

What you can do next

• Add Additional Elements

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.