Element Settings: Button Style

The Button Style setting allows you to select a pre-configured style from your Styleguide or to customize the element independently. This includes settings like color, font, border, and more. Some settings can be set for specific Button States separately. When configuring the Style, it is easiest to think of a Button as three separate components; the Button container itself, the Primary Text, and the Sub Text.

Requirements: 

• An active ClickFunnels 2.0 account
• A page
• At least one supported element

Table of Contents:

• Style
• Button States
• Button (Container) Component
• Primary Text Component
• Sub Text Component

Style:

Selecting one of the numbers will load the preconfigured settings from your Styleguide. However, choosing the three-dot button will allow you to customize this specific button independently.

Important Note: To customize the preconfigured settings, do so in your Styleguide by clicking the Edit Style button.

Back to Top

Button States:

Three Style settings can be changed for each button state. Those settings are:

• Background: The Button (Container) Component’s background color.
• Text Color: The Primary Text Component’s text color.
• Sub Text Color: The Sub Text Component’s text color.

Important Note: Please see this article for more information about Button States.

Back to Top

Button (Container) Component:

When thinking of the three components of a Button, these settings affect the Button around and behind the Primary Text and Sub Text.

• Background: The color of the button. This setting is configured for each Button State.
• Border: The border around the button. See this article for more details about Border settings.
• Corner: Control the roundness of the corners. See this article for more details about Corner settings.
• Shadow: Configure a shadow for the button. See this article for more details about Shadow settings.

Back to Top

Primary Text Component:

The Primary Text component displays the Button Text configured in the Button Config settings. The following settings affect the Primary Text for the button.

• Text Color: The color of the Primary Text. This setting is configured for each Button State.
• Primary Text Style: Font settings for Primary Text. See this article for more details about Typography settings found here.
• Primary Text Shadow: Configure the shadow for the Primary Text. See this article for more details about Text Shadow settings.
• Icon Before: Display an icon before the Primary Text. See this article for more details about Icon Before settings.
• Icon After: Display an icon after the Primary Text. See this article for more details about Icon After settings.

Back to Top

Sub Text Component:

The Sub Text component displays the Sub Text configured in the Button Config settings. The following settings affect the Sub Text for the button.

Important Note: Sub Text Style settings appears once you have entered a subtext in the Button Config settings.

• Sub Text Color: The color of the Sub Text. This setting is configured for each Button State.
• Sub Text Style: Font settings for the Sub Text. See this article for more details about Typography settings found here.
• Sub Text Shadow: Configure the shadow for the Sub Text. See this article for more details about Text Shadow settings.

Back to Top

Supported Elements:

This setting can be found in the following elements: 

• General Element: Button

Back to Top