The Button Block allows you to add a button anywhere on your Campaign or Course pages.
Below is an overview of the various Button Block settings:
Details
- Button Label
Add the text you want to appear on your button.
You can also use the formatting buttons: Bold, Italic, Underline, and Strike-through, to change your button label’s typographical emphasis. - Button Type
From the drop-down, select the width you prefer for your button from the options provided: i.e. Full Width | 90% | 80% | 70% | 50% | 35% | Padding Defined
Font
This tool will help you fully customize the font style of your button text.
- Font Family
Use this feature to change your button text’s Font type.
Click on the drop-down and select the Font type you want. - Font Size
This changes the size of your button text.
Simply click on the slider and move it left or right to increase or decrease the text size. - Line Height
This feature increases or decreases the space between the lines of text.
Click on the drop-down and select the line height you prefer. - Font Weight
This feature changes the weight of text.
The font weight property sets how thick or thin characters in text should be displayed.
Click on the drop-down and select the line height you prefer.
IMPORTANT: If the bold format button is set in Details -> Button Label field, Font Weight will not apply anymore.
- Text Color
This feature changes the color of your button text.
To use custom colors, simply paste the Hex code of the exact color you want in the field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
This will open the Color Wheel, where you can select whichever color you prefer.
Icons
This feature allows you to add an icon next to your button text.
- Icon Drop-down (Left/Right)
From the drop-down menu, select the icon you prefer. - Icon Color
This feature changes the color of your button icon.
To use custom colors, simply paste the Hex code of the exact color you want in the field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
This will open the Color Wheel, where you can select whichever color you prefer.
Subtext
This is a small text that will appear below the Button Label.
This will allow you to add more information about the button. 
- Label:
The text that you want to appear below your button label. - Font Family:
Use this feature to change your subtext’s Font type.
Click on the drop-down and select the Font type you want. - Font Size:
This changes the size of your subtext.
Simply click on the slider and move it left or right to increase or decrease the text size. - Text Color:
This feature changes the color of your subtext.
To use custom colors, simply paste the Hex code of the exact color you want in the field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
This will open the Color Wheel, where you can select whichever color you prefer. - Margin Top:
The space between the main button label and subtext.
Background
This feature allows you to change the background color of the button block.
- To change the background color, you can either add a Hex code in the field provided or choose a color from the Color Wheel.
- If the Color Wheel is closed, simply click on the Color Picker button to the right of the background field.
Hover Style
This feature allows you to change the style of your button upon hovering.
- Color
Change the color of your button label upon hovering. - Background Color
Change the color of your button upon hovering. - Border Color
Change the color of the button border upon hovering.
Border
This feature allows you to add a border around your button.
- Borders
Select whether you want a full border where the button is wrapped in a border, or simply one side of the button has a border e.g. None | All Border (full border) | Top Border | Bottom Border | Right Border | Left Border | Left and Right Borders. - Border Type
You can select the style for your border.
TIP! In order to see the border around your button, you need to select one of the actual style options available e.g. Solid, dashed, or dotted. If the setting is left on No Border Style, your selection in the Borders setting will not work.
- Border Size
You can change the thickness of the border by selecting the pixel width you prefer. - Border Radius
You can add rounded edges to the border by selecting the relevant pixel width. You may now control each side by entering the number on Top Left, Top Right, Bottom Right and Bottom Left box. - Border Color
You can change the color used for the border. To use custom colors, simply paste the Hex code of the exact color you want in field provided e.g. #000000 = black or click on the Color Picker button to the right of the field.
Box Shadow
This feature allows you to add a shadow around the border of your Button Block.
- Horizontal Shadow Position
Adjust the horizontal position of the shadow. Use negative integer value to adjust horizontal position to left. Or use positive integer value to adjust to right. - Vertical Shadow Position
Adjust the vertical position of the shadow. Use negative integer value to adjust vertical position to top. Or use positive integer value to adjust to bottom. - Blur radius
Adjust the blur radius. This will determine how blurry the shadow will be. Use positive integer value. - Spread radius
Adjust the spread radius. This will determine how large the shadow will be. Use integer value. - Shadow Color
To use custom colors, simply paste the Hex code of the exact color you want in field provided e.g. #000000 = black, or click on the Color Picker button to the right of the field.
This will open the Color Wheel, where you can select whichever color you prefer. - Shadow Color Opacity
Adjust the opacity or transparency of the shadow. Click on the slider and move it left or right to increase or decrease the opacity. - Shadow Position
Adjust the position of the shadow, either inside or outside (default) the button
Link
This feature allows you to link one of your KLEQ pages or a custom destination to your button. 
- Link
From the drop-down menu, the options are based on page type or custom destination. - To add an internal page, simply select the appropriate page type (Campaign, Course, Blog, Portal Pages, Checkout Boxes or Optin Boxes). Once the preferred page type is selected, new drop down menu will appear to select the actual page.
- To add an external link, select Custom Destination. Then add your URL to the field provided. Make sure it is a valid and complete URL that starts with http:// or https://.
- Select Notification Popup if you want to link the button to your site’s browser notification. For more details, click here.
The options below are available on Course Pages only
- Open Members Directory
Choose this option if you want to display the member directory after clicking the button, instead of the normal way of going to the Avatar Profile > Members - Members of Course
This will open a pop-up window showing only members who have access to a specific course/course page they are viewing. With this, they can communicate and send private messages with each other and connect. - Open Messages
This will open the Messages popup window. To setup Messages, click here.
The following settings are optional and not available on Optin Page page types.
- Open in New Tab (Optional)
Switch the toggle ON, depending on if you want the link to open in a new tab or not. - No follow (Optional)
This feature will allow you to set your links to no-follow. This is important if you want search engines to ignore your link.
If this is enabled, your link will not impact search engine rankings. - Pass URL parameters to next URL (Optional)
This feature allows you to pass tracking tags or data parameters from one page URL to another. Enable this feature if you are applying tracking tags to your URL or using certain features that require data to be passed on in order to work e.g. Auto Deadlines, Webinars, Viral Share tool, etc. - Pass member details (Optional)
This setting is available on Course pages only.
This feature will allow you to pass your members’ details to the next page.
For example, give access to special discounts on Order Pages exclusively accessible by your members.
Alignment</h4
- Horizontal Align
The feature allows you to re position the button on the page.
You can choose either Left, Center or Right alignment from the drop-down - Text Alignment
This feature allows you to reposition the text on the button. You can choose either Left, Center or Right alignment from the drop-down.
Spacing
This feature allows you to add more space around your Button Block.
- Padding
You can add padding around your text, so that there is additional space. Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Padding field provided.
This is particularly helpful if you want to add spaces inside your Button block border. - Margin
You can add margin around your text, so that there is additional space.
Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Margin field provided.
This is particularly helpful if you want to add spaces outside your Button block border.
Options
This feature allows you to use the available options for extra coding (HTML/CSS/JavaScript)
- Element Id:
This shows the element id of a specific block, which can then be used by CSS and JavaScript to perform certain tasks for the element with the specific id value. To learn more, please check here
- Classes:
This feature allows is used to define equal styles for elements with the same class name. To learn more, please check here
Audiences
This is a specialized feature for your Button Block.
- Audience
If you want to take advantage of Audience segmentation, this is a great tool to use.
It allows you to set up a custom link/URL that will redirect users when the button is clicked for each Audience group that you have created.To use this feature
From the drop-down menu, select the Audience you created in the Boosters section.
Once open, you will see an individual text field for each Audience group.
Simply add in the custom URL/Link you want to use for each group.
Animation
This tool allows you to add animation effects to your Button Block.
- Type
From this drop-down you can choose a trigger to activate the animation i.e.
+ None – no animation will be applied
+ On Page Load – the animation is triggered as the page loads
+ On Page Scroll – the animation is triggered only when the user scrolls to that section. - Style
This feature adds an animation style to your Button Block. Simply choose the preferred option from the drop-down menu.
+ Fade In – the Button block will fade in from the background
+ Scale In – the Button block scales in from the background
+ Top – the Button block will slide in from the top
+ Right – the Button block will slide in from the right
+ Bottom – the Button block will slide in from the bottom
+ Left – the Button block will slide in from the left - Delay (ms)
If you want to add a time delay for when the Button Block appears, simply add the delay in milliseconds e.g. 3000ms will be 3 second delay.
Mobile
This feature allows you to adjust the size of the font as well as adjust the padding and margin of your Button block when in mobile view.
- Font Size
You can enter the size of the text for mobile view - Padding
You can add padding so that there is additional space. Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Padding field provided.
This is particularly helpful if you want your Button block to automatically add spaces inside your Button block border when in mobile view. - Margin
You can add margin so that there is additional space.
Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Margin field provided.
This is particularly helpful if you want your Button block to automatically add spaces outside your Button block border when in mobile view.
Display
This feature allows you to choose the type of device you want the Button block to display.
- Display
From this drop-down, you can choose which device you want to display the Button block
+ All Devices – the Button block will be displayed on both desktop and mobile devices
+ Desktop Only – the Button block will be displayed on desktop devices only
+ Mobile Only – the Button block will be displayed on mobile devices only
+ None – the Button block will not be displayed on both desktop and mobile devices
That’s it, click on SAVE and you are done!