Button: Allow Users to Submit Actions

The Button Templates option lets you quickly style your button by selecting from various pre-designed templates. These templates provide a range of styles, from simple flat designs to gradient, bordered, and 3D effects, enabling you to choose a look that best matches your page's design with just one click.

To apply a template, navigate to the Templates tab in the button settings and select your preferred style. Once applied, you can customize the button's appearance under the Settings and Advanced tabs, allowing you to adjust colors, fonts, and other properties for a fully tailored look.

This field allows you to define the main text and sub-text displayed on the button. When you click Edit, additional options become available:

• Button Text: This field allows you to enter the primary text displayed on the button. Customize it to match the action you want users to take, such as "Submit," "Get My Free Guide," or any call-to-action relevant to your offer.
  

• Sub Text: This optional field lets you add additional text below the main button text. Use it to provide extra context or information if needed.

• Aria-Label: This attribute improves accessibility by giving screen readers additional information about the button's purpose. Enter a description to help visually impaired users understand the button’s function. Learn more about the aria label in MDN documentation.

This setting lets you define what happens when a visitor clicks the button. The available actions include:

1. Nothing Happens: Selecting the Nothing Happens option does nothing when clicking the button.

2. Go to: When you select Go to action, two additional fields will appear, allowing you to choose between Custom URL and Custom Action Link for redirection.

   1. Custom URL: This option lets you enter a specific URL (a “hard link”) to which the button will redirect upon clicking. This can be an external website or any URL you want to send the user.

   2. Custom Action Link: Instead of linking directly to a hard-coded URL, you can use a relative path or a custom action command (e.g., #open-popup or /terms-and-condition). This flexibility allows you to create dynamic links within your page that trigger actions such as opening a pop-up or navigating to a page that matches the path name associated with the same domain.
      

3. Submit Form: When you select Submit Order/Form as the button action, you can control the post-submission redirection with the Enable Redirect Override option:

   • Default Behavior: If the Enable Redirect Override box is left unchecked, the button action will follow the default behavior by advancing users to the next step in your ClickFunnels funnel. If the funnel does not have a next step, the form will be submitted, and the page will reload to the current URL.

   • Enable Redirect Override: By checking this box, you can input a custom URL or a relative path to a page URL in the field. When enabled, the button will redirect users to this specified URL after the form submission instead of progressing to the next step in the funnel.
     

4. Scroll to: Selecting Scroll to as the button action allows you to create smooth navigation by scrolling to a specific part of the page when the button is clicked. After selecting Scroll to, a dropdown menu appears where you can choose the target element, such as a Section, Row, or specific Element. This feature is useful for guiding users to relevant content on the same page, improving the user experience by reducing the need for manual scrolling.

5. Show/Hide: The Show/Hide action allows you to toggle the visibility of specific elements on the page when the button is clicked. After selecting Show/Hide, two dropdown menus appear:

   1. Show...: Choose elements, sections, or rows that will be displayed when the button is clicked.

   2. Hide...: Select elements, sections, or rows that will be hidden when clicking the button.
      

6. Open Pop-up: Opens the page pop-up window, which could contain additional information, forms, or calls to action.

7. Close Pop-up: Closes the active pop-up window.

8. Mark Complete: Marks the current lesson as complete in a course.

9. Redirect to Next Step: When clicking the button, this action automatically takes the user to the next step in your funnel sequence. It’s a quick way to guide visitors through the funnel progression without manually specifying a URL.

   Note:

   The Redirect to Next Step action is not intended for form submissions. Selecting this action will not submit any form data; it only triggers a redirection to the next funnel step upon clicking. If you need to capture form information before moving users forward, select the Submit Form action instead, as it will properly submit the data and then direct users as specified.

The Size and Spacing settings allow you to control the size and positioning of the button within its container. Here’s how each option works:

• Full Width: This toggle lets you set the button to span its entire container width. When enabled, the button will stretch to fill the available space horizontally, creating a prominent, full-width appearance. When disabled, the button will only take up as much space as needed based on its content.

• Padding Sides: Adjust the padding on the left and right sides of the button. Increase this value to widen the button while keeping it centered within its container.
  

• Padding Vertical: Adjusts the padding on the top and bottom of the button. This setting helps control the button's height, making it appear larger or smaller vertically.

The Button Style settings allow users to apply and customize pre-defined styles or override them for specific adjustments. Here’s a guide to using these settings:

1. Style Selection: You can choose from three pre-defined styles (1, 2, and 3) on the page globally. Selecting one of these styles applies the pre-set look to the button.

2. Edit Style: By clicking Edit Style, you can edit the properties of the selected style directly within the editor. This option adjusts the style globally and impacts all buttons using it.

3. Override: If you want to customize the style for a specific button instance without affecting other buttons, you can select the Override option. This unlocks the button style properties, allowing individual customization. When Override is enabled, additional style settings become accessible, divided into the following sections:

Button States

The Button States settings allow you to define how the button appears in different interaction states:

• Default: The normal appearance of the button when it’s idle. For example, you might set the background to blue, with white text and gray sub-text color to give the button a clean, standard look.

• Hover: The appearance of the button when a user hovers over it. This state can include changes to the background, text color, or sub-text color to indicate interactivity. For instance, when the user moves their mouse over the button, the background could change to a darker shade of blue, the text color could become a brighter white, and the sub-text might switch to bold, signaling that the button is clickable.

• Pressed: The appearance of the button when it’s clicked or pressed, providing visual feedback to the user. In this state, you might set the background to dark gray, change the text color to white, and switch the sub-text color to red, giving clear feedback that the action has been registered.

Each state allows customization of the Background, Text Color, and Sub Text Color to create a cohesive and responsive design.Each button state (Default, Hover, and Pressed) includes settings to customize the Background, Text Color, and Sub Text Color, allowing you to create distinct appearances for each interaction state.

• Background: This setting controls the button's background color for each state. For example, you might choose a primary color like blue for the Default state, a darker shade of blue for Hover, and a neutral color like gray for Pressed. Adjusting the background color for each state helps visually communicate interactivity.

• Text Color: This setting changes the color of the main text on the button. For instance, in the Default state, you may set the text color to white for readability against a colored background. In the Hover state, you might choose a slightly brighter or contrasting shade to make the text stand out more, and in the Pressed state, you could select a color that pairs well with the background to maintain visibility.

• Sub Text Color: This setting controls the color of any sub-text displayed on the button. For example, you may set a subtle gray color for the Default state, switch to a bolder shade on Hover to highlight interactivity and use a distinct color like red for Pressed to signal that the button has been activated.

Primary Text Style

The Primary Text Style section controls the appearance of the main button text. Each option allows customization to create a clear and engaging call-to-action.

1. Button Font: Select the font type for your primary button text. ClickFunnels provides a range of Google Fonts, and you can also upload custom fonts by navigating to Workspace Settings > My Assets > Fonts. Uploaded fonts will appear in the selection list.

2. Weight: Defines the thickness of the primary button text, with options like Thin, Regular, and Bold. Choose a bold weight to create impact or a lighter weight for a more subtle look.

3. Font Size: You can adjust the text size using the slider or manually inputting a specific value. Additionally, you can choose between rem or px for the size measurement, such as 2rem or 32px.

   • Rem is a relative unit based on the base font size defined in your style guide. For example, if you select a text size of 2rem and your style guide specifies a base font size of 16px for desktop, the resulting text size will be 32px for desktop view (i.e., 2rem × 16px = 32px).

   • Px is an absolute measurement, providing precise control over the text size.

4. Font Size Mobile: Set a specific font size for mobile views to ensure readability on smaller screens.

5. Letter Spacing: Control the spacing between characters in the primary text. Increase the value for a more spaced-out look, or decrease it for tighter character spacing.

6. Line Height: This adjusts the vertical spacing between lines, which is useful if the button text has multiple lines. A higher line height increases the spacing, while a lower one brings the lines closer together.

7. Text Casing: Choose between lowercase, uppercase, and title case for the primary button text to control its presentation.

8. Decoration: Style the primary text with options like underline, strikethrough, or italics to make it stand out or emphasize certain elements.

Sub-Text Style

The Sub-Text Style section customizes the appearance of any secondary text displayed below the primary button text. Here’s an overview of each option:

1. Margin Top: Adjusts the vertical space between the primary text and the sub-text. Increasing this value moves the sub-text further down, creating more separation between the two text elements.

2. Button Font: Select the font type for your button sub text. ClickFunnels provides a range of Google Fonts, and you can also upload custom fonts by navigating to Workspace Settings > My Assets > Fonts. Uploaded fonts will appear in the selection list.

3. Weight: Defines the thickness of the sub-text, with options for a subtle, lightweight appearance or a bold, emphasized look.

4. Font Size: You can adjust the text size using the slider or manually inputting a specific value. Additionally, you can choose between rem or px for the size measurement, such as 2rem or 32px.

   • Rem is a relative unit based on the base font size defined in your style guide. For example, if you select a text size of 2rem and your style guide specifies a base font size of 16px for desktop, the resulting text size will be 32px for desktop view (i.e., 2rem × 16px = 32px).

   • Px is an absolute measurement, providing precise control over the text size.

5. Font Size Mobile: Set a specific sub-text font size for mobile devices to ensure optimal readability.

6. Letter Spacing: Adjust the spacing between characters in the sub-text, allowing for either a more open or condensed presentation.

7. Line Height: This controls the vertical spacing between lines of subtext, which is especially useful for multi-line subtext. A higher line height adds more space between lines, while a lower one brings them closer.

8. Text Casing: Adjust the capitalization of the sub-text with options for lowercase, uppercase, or title case, giving flexibility in presentation.

9. Decoration: Use styles like underline, strikethrough, or italics to highlight the subtext, adding emphasis and making the text stand out.