Learn how to add the button element to your Clickfunnels page.
Why you would need this
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.
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.
- 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.
Note: The Aria-Label will allow you to add descriptive text to your button for ADA compliance. Click Here To Learn More About ADA Compliance.
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.
Button Actions
- 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.
What you can do now
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.
Comments
5 comments
Terrible to have videos without controls or audio. or the ability to maximize them so you can see them. This make the whole page worthless to me!
It doesn't tell me anything about how to save the action or how to set an action to a web address. Useless.
How do you change the border color?
How can I set the following action, once the button is pressed?
How do I ensure the button is submitting and capturing the optin details?
Please sign in to leave a comment.