# Buttons X

Powerful Button Builder Plugin for WordPress

## Introduction

- Item Name : Buttons X - Powerful Button Builder Plugin for WordPress
- Item Version : 1.6
- Author : Gautam Thapar
- Online Docs : Updated first - http://btn.sx/1Ovur8M
- Support Forum : http://btn.sx/1ES1TGx

## Preface #back to top

This knowledge base is wiki powered informational site where you can find latest documentation available for our Buttons X button builder plugin for WordPress. We consider this resource as a starting point for users to get familiar with Buttons X usage, getting answers to the most common questions or getting into more advanced features and options.

#### Introduction #back to top

Thank you for purchasing Buttons X WordPress plugin. You are amazing!

Buttons X is powerful and an amazing plugin, it will help you manage buttons right from your WordPress dashboard. Create stunning buttons in few minutes without any coding.

#### Support & Resources #back to top

In this section you will find list of useful resources related to Buttons X WordPress plugin, including link to official support, CodeCanyon sales page and official website.

#### Resources

- Official Website
- Official Sales Page on CodeCanyon
- Official Demo
- Twitter Account

#### Official Support

To get your support related question answered in the fastest timing, please head over to our support page and create a ticket.

Before applying for support please make sure you understand the rules of support and go through all steps described and listed on support policy in order to get your issues solved as soon as possible.

#### Support Policy #back to top

#### General

The purpose of support is to provide you with the right answers at the right time. Our support is provided only for direct product buyers.

Ticket support is the only official support handling mechanism. Questions sent using other channels may be ignored without notice.

We provide support because of goodwill and want to offer our customers best service possible. We keep rights not to provide support due to abuse or any other reasons that are against this policy.

#### Pre-Support Actions

Before asking your question, please make sure you have read the documentation provided and searched the answer within our knowledge base at https://gautamthapar.ticksy.com/, as some of the questions may be already covered within this resource.

#### Opening Support Ticket

In order to get response in reasonable time we are kindly asking you to provide following information while sending email:

- Your website URL.
- Login credentials (Admin access preferable).
- Version of Buttons X used.
- Detailed description of actions taken before issue.
- Screenshot of the problem.
- Any other information that you find useful.

All information provided is confidential and will not be provided to any third party.

#### What You Can Expect From Our Support?

There are certain things that you can expect from our support:

- We always have bug-related and technical support in priority.
- We are happy to receive proposals and ideas.
- Tiny custom requests can be served (low priority, depending on workload and goodwill).

#### What You Can Not Expect From Our Support?

There are certain things that are out of scope and will not be handled by me:

- Generic WordPress questions.
- Issues related to 3rd party plugins.
- Customization requests.
- Any tickets that contain abuse or violence.
- Requests from indirect purchases (Buttons X came as part of some other product).

#### E-mail Policy

With leaving your e-mail you agree to receive promotional e-mails and newsletters from Gautam Thapar.

Thank you for finding time to read this policy and remember that I am here to help you out.

#### Release Notes #back to top

I am constantly working on a new features and improvements for Buttons X in order to keep your site and your business at the top. In this section you can find information on each and every update we created during lifetime of Buttons X.

Date | Version | Features | Files Changed
--- | --- | --- | ---
30th August 2015 | 1.0 | Initial release | -

## Licensing #back to top

This section will explain all you have to know about licensing for Buttons X and point you to necessary resources. The most important thing you need to know about licensing of Buttons X is that we totally rely on licensing and copyrights developed by Envato who has an amazing licensing standards. At the moment Envato, so as Gautam Thapar, offers several types of licenses.

#### Available Licenses

- Extended License
- Regular License

## Extended License #back to top

Extended License allows use of the item in one single end product, which you or one client may sell to end users (charge end users to access or use the end product), but user do not have access to the source files in any case.

Important: Distribution of source files is not permitted.

Extended license allows you, with the permission from Gautam Thapar (Author), to integrate Buttons X into your WordPress theme to sell on ThemeForest.

In order to read more about Extended license please visit CodeCanyon.

## Regular License #back to top

Regular License is the most common type of licensing for Buttons X. Regular license allows you to use item in one single end product which end user is not charged to access or use. You can acquire regular license for your own website, or if you are a developer - for one client by transferring the license to your client when the project is finished.

Important: Distribution of source files is not permitted.

Extended license allows you, with the permission from Gautam Thapar (Author), to integrate Buttons X into your WordPress theme to sell on ThemeForest.

In order to read more about Regular license please visit CodeCanyon.

## Getting Started #back to top

Thank you for purchasing Buttons X and congratulations with the huge win which you are going to experience once you start using our amazing button builder which will bring you new experience in building your WordPress buttons and also will save you tons of time.

This section will guide you through initial setup and activation processes in order to get your copy of Buttons X up and running. Please follow sections step by step to get familiar with installation, activation and update processes.

#### Contents

- Plugin Installation
- Plugin Update
- Plugin Settings
- One Click Import

## Plugin Installation #back to top

Buttons X installation doesn't differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.

1. Login to your website.
2. Go to 'Plugins' > 'Add New'.
3. Click 'Upload Plugin'.
4. Browse to the plugin's zip file (it is located in the archive you've downloaded from CodeCanyon) and choose that file.
5. Click 'Install Now' button.
6. Wait while plugin is uploaded to your server.
7. Click 'Activate Plugin' button.

Congratulations, you are all set! To start creating buttons visit 'Buttons' > 'Add New'. Also make sure to check 'Buttons' > 'Settings' for available settings.

## Plugin Update #back to top

Please follow these steps -

1. First, login to CodeCanyon and under your profile click Downloads link.
2. Re-download Buttons X and extract it.
3. Click 'Upload Plugin'.
4. Now navigate to the Plugins menu in your WordPress admin area.
5. Deactivate Buttons X, delete it.
6. Upload new version that was downloaded few seconds earlier. Activate Buttons X.

## Plugin Settings #back to top

Buttons X comes with a customised settings panel. The first thing to do after installing the plugin is to set the plugin settings. Navigate to 'Buttons' > 'Settings' and click the 'General' settings tab.

I try not to bother you with much settings so the settings panel is very minimal.

Available Settings -

1. General
   1. CSS - Here you can choose to load button CSS through an external file or inline.
2. Social
   1. Social - Select the post types on which you would want to enable social buttons meta box.

Once you have made your choices, click 'Save'. If everything goes fine, you should see 'Settings saved' notification.

## One Click Import #back to top

Buttons X includes demo buttons to get you started. Importing demo buttons is very easy, all you have to do is follow the below steps:

1. Navigate to 'Buttons' > 'Import'.
2. Then under 'Demo Buttons' click import.
3. That's it! You will be notified about the buttons being imported. Play around with the demo buttons. You can edit, delete or do whatever you want with these buttons. And you can import them again whenever you want.

Detailed information is available on Export & Import page.

## Buttons #back to top

In this section you will learn in detail on how to create buttons and the various options available under buttons.

## Creating a Simple Button #back to top

In this section you will learn about creating beautiful buttons using Buttons X button builder plugin for WordPress.

Let's get started.

1. Navigate to 'Buttons' > 'Add New'. You will notice that there is already a simple button made for you. This button is just to get you started.
2. Under 'General' tab do the following:
   1. Click 'Link' and choose 'URL' as type of link.
   2. Once you have selected 'URL' option you will see 'URL' field becomes visible. Add a custom URL like https://www.button.sx.
   3. Next, click 'Padding' and adjust the top, bottom, left and right padding values. You can see the button adjusting according to padding values in the live preview.
3. Under 'Primary Text' tab do the following:
   1. Click 'Text' and change the 'Text' field.
   2. Click 'Font' and change the font color.
   3. Click 'Color' and change normal and hover colors.
4. Next, under 'Background' tab do the following:
   1. Click 'Color' tab and change normal and hover background color values. Check live preview for live background color changes.

(Optional) Add a pack and tags to easily find your button when you have lots and lots of buttons.

Once you have finished all these steps, give button a title and save the button.

Now, navigate to 'Buttons' > 'Buttons' and you can find the button short code in the 'ShortCode' column. Put this short code wherever you would like to display the button (on a post, page, etc.).

## Available Options #back to top

In this section you will learn in detail the various options available under the options panel.

#### Contents:

1. Animations
2. Background
3. Border
4. CSS
5. General
6. Gradient
7. Icon
8. Layout
9. Link
10. Margin
11. Padding
12. Preview
13. Primary Text
14. Secondary Text
15. Shadow
16. Additional

## Animations #back to top

Button animations related options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Hover
Animation | select | animation_hover | - | hvr-bob, hvr-bounce-in, hvr-bounce-out, hvr-buzz, hvr-buzz-out, hvr-float, hvr-grow-rotate, hvr-hang, hvr-pop, hvr-pulse, hvr-pulse-grow ,hvr-pulse-shrink ,hvr-push, hvr-rotate, hvr-shrink, hvr-sink, hvr-skew, hvr-skew-backward, hvr-skew-forward, hvr-wobble-bottom, hvr-wobble-horizontal, hvr-wobble-skew, hvr-wobble-to-bottom-right, hvr-wobble-to-top-right, hvr-wobble-top, hvr-wobble-vertical, hvr-grow, hvr-back-pulse, hvr-bounce-to-bottom, hvr-bounce-to-left, hvr-bounce-to-right, hvr-bounce-to-top, hvr-radial-in, hvr-radial-out, hvr-rectangle-in, hvr-rectangle-out, hvr-shutter-in-horizontal, hvr-shutter-in-vertical, hvr-shutter-out-horizontal, hvr-shutter-out-vertical, hvr-sweep-to-bottom, hvr-sweep-to-left, hvr-sweep-to-right, hvr-sweep-to-top, hvr-overline-from-center, hvr-overline-from-left, hvr-overline-from-right, hvr-overline-reveal, hvr-trim, hvr-underline-from-center, hvr-underline-from-left, hvr-underline-from-right, hvr-underline-reveal, hvr-curl-top-left, hvr-curl-top-right, hvr-curl-bottom-right, hvr-curl-bottom-left. | Select button hover animation type.

## Background #back to top

Button background related options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Color
Normal | colorpicker | background_color_normal | #f4f4f4 | - | Set button background color.
Hover | colorpicker | background_color_hover | #e8e8e8 | - | Set button background color for when the button will be hovered.
Image
Normal | file | background_image_normal | - | - | Select or upload button background image.
Hover | file | background_image_hover | - | - | Select or upload button background image for when the button will be hovered.

## Border #back to top

Button border related options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Normal
Size | range | border_size_normal | 0 | - | Set border size in pixels.
Style | select | border_style_normal | none | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit | Set border style.
Color | colorpicker | border_color_normal | - | - | Set border color.
Hover
Size | range | border_size_hover | 0 | - | Set border size in pixels for when the button is hovered.
Style | select | border_style_hover | none | none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit | Set border style for when the button is hovered.
Color | colorpicker | border_color_hover | - | - | Set border color for when the button is hovered.
Radius (Normal)
Top Left | range | border_radius_top_left_normal | 0 | - | Set top left border radius in pixels.
Top Right | range | border_radius_top_right_normal | 0 | - | Set top right border radius in pixels.
Bottom Left | range | border_radius_bottom_left_normal | 0 | - | Set bottom left border radius in pixels.
Bottom Right | range | border_radius_bottom_right_normal | 0 | - | Set bottom right border radius in pixels.
Radius (Hover)
Top Left | range | border_radius_top_left_hover | 0 | - | Set top left border radius in pixels for when button is hovered.
Top Right | range | border_radius_top_right_hover | 0 | - | Set top right border radius in pixels for when button is hovered.
Bottom Left | range | border_radius_bottom_left_hover | 0 | - | Set bottom left border radius in pixels for when button is hovered.
Bottom Right | range | border_radius_bottom_right_hover | 0 | - | Set bottom right border radius in pixels for when button is hovered.

## CSS #back to top

CSS options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Custom Class | text | class | - | - | Add a custom class to button. This will help in adding custom styles using this class.
Custom CSS | css editor | css | - | - | Add custom css like below -
                                                    #btnsx-123 {
                                                        padding: 40px;
                                                    }
where, '123' is the ID of button. Do change it according to your button ID.

## Gradient #back to top

Button gradient related options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Type
Normal | select | gradient_type_normal | vertical | vertical, horizontal, diagonal_top, diagonal_bottom, radial | Select gradient type.
Hover | select | gradient_type_hover | vertical | vertical, horizontal, diagonal_top, diagonal_bottom, radial | Select gradient type for when button will be hovered.
Stop (Normal) [Repeatable]
Location | range | gradient_stop_location_normal | - | - | Set gradient stop location. Must be between 0 and 100.
Color | color | gradient_stop_color_normal | - | - | Set gradient stop color.
Stop (Hover) [Repeatable]
Location | range | gradient_stop_location_hover | - | - | Set gradient stop location for when button is hovered. Must be between 0 and 100.
Color | color | gradient_stop_color_hover | - | - | Set gradient stop color for when button is hovered.
CSS
Normal | css editor | gradient_css_normal | - | - | Add custom gradient CSS.
Hover | css editor | gradient_css_hover | - | - | Add custom gradient CSS for when button will be hovered.

## Icon #back to top

Button icon related options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Main
Icon | select | icon | - | Font Awesome Icon | Select the desired icon. Icon will be placed to the left of primary text if it is not already aligned.
Size | range | icon_size | - | - | Add font size in pixels. This will make the icon bigger or smaller depending up on the value. Best is to keep the icon size similar to primary text size.
Alignment | select | icon_alignment | - | none, left, right | Position the icon vertically. More the value more the icon will move vertically downwards. You can also specify negative values to move icon upwards.
Color
Normal | colorpicker | icon_color_normal | - | - | Select icon color.
Hover | colorpicker | icon_color_hover | - | - | Select icon color for when button is hovered.
Image
Normal | media | icon_image_normal | - | - | Select or upload icon image.
Hover | media | icon_image_hover | - | - | Select or upload icon image for when the button is hovered.
Position Freely | checkbox | icon_image_position | 0 | 0, 1 where 0 = no, 1 = yes | Select or upload icon image for when the button is hovered.
Image Position
Top | number | icon_image_position_top | 0 | - | Add value in pixels. This will position the icon from top of button based on the value provided. More the value more the icon image will move to the bottom of button.
Bottom | number | icon_image_position_bottom | 0 | - | Add value in pixels. This will position the icon from bottom of button based on the value provided. More the value more the icon image will move to the top of button.
Left | number | icon_image_position_left | 0 | - | Add value in pixels. This will position the icon from left of button based on the value provided. More the value more the icon image will move to the right of button.
Right | number | icon_image_position_right | 0 | - | Add value in pixels. This will position the icon from right of button based on the value provided. More the value more the icon image will move to the left of button.
Shadow
Horizontal | range | icon_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels. Adds horizontal shadow to icon.
Vertical | range | icon_shadow_vertical | - | - | Add position of the vertical shadow in pixels. Adds vertical shadow to icon.
Blur | range | icon_shadow_blur | - | - | Add blur radius in pixels. Makes icon shadow blurry.
Color | colorpicker | icon_shadow_color | - | - | Pick icon shadow color.
Divider
Position | select | icon_divider_position | - | none, left, right | Select divider position. Position the divider to left or right of icon.
Size | range | icon_divider_size | - | - | Add divider size in pixels. This will make the divider bigger or smaller depending up on the value. Best is to keep the divider size little smaller or equal to icon size.
Color | colorpicker | icon_divider_color | - | - | Select divider color.
Animation
Animation | select | icon_animation | - | none, click, hover | Select when to animate the icon, on button click or when button is hovered.
Animation Type | select | icon_animation_type | - | All animate.css options | Select type of animation. Choose from many different types.
Padding
Top | range | icon_padding_top | 0 | - | Set top padding for icon.
Bottom | range | icon_padding_bottom | 0 | - | Set bottom padding for icon.
Left | range | icon_padding_left | 0 | - | Set left padding for icon.
Right | range | icon_padding_right | 0 | - | Set right padding for icon.

## Layout #back to top

Layout options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
ID | hidden | id | (Auto Generated) | - | The button ID.
Width | range | width | - | - | Add button width in pixels. This gives the button a fixed width. Clearing the field removes fixed width.
Height | range | height | - | - | Add button height in pixels. This gives the button a fixed height. Clearing the field removes fixed height.
Size | select | size | - | huge, large, wide, small, mini | These are some preset button sizes. Changing the size value automatically adjusts the font size and padding values of primary text.
Disabled | checkbox | disabled | 0 | 0, 1 | Make the button disabled by checking this field. Clicking the button won't be possible once disabled.
Embossed | checkbox | embossed | 0 | 0, 1 | Checking this field gives an embossed effect to button.
Full Width | checkbox | full_width | 0 | 0, 1 | Make the button cover the entire width of the container.
Container | checkbox | container | 0 | 0, 1 | Add a container div to button.
Wrap Center | checkbox | wrap_center | 0 | 0, 1 | Makes the button centered. Very helpful when you want the button to be centered inside a big container.

## Link #back to top

Link options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Type | select | link_type | - | admin_page, back_to_top, edd_checkout, edd_straight_to_gateway, home_page, login, login_redirect_current_page, login_redirect_home_page, login_redirect_custom_page, logout, logout_redirect_current_page, logout_redirect_home_page, logout_redirect_custom_page, lost_password, lost_password_redirect_current_page, lost_password_redirect_home_page, lost_password_redirect_custom_page, menu, post, register, url, woocommerce_add_to_cart | Choose the type of link required for the button.
Target | select | link_target | - | new_window, same_window | New window opens the link in a new browser tab whereas Same Windows opens the link in the same browser tab.
Relationship | select | link_relationship | - | (blank), alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag | It species the relationship between the current document and linked document/resource. Alternate - Links to an alternate version of the document. Author - Links to author of the document. Bookmark - Permanent URL used for bookmarking. Help - Links to a help doument. License - Links to copyright information for the document. Next - The next document in a selection. Nofollow - Links to an unendorsed document, like a paid link. No Referrer - Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink. Prefetch - Specifies that the target document should be cached. Previous - The previous document in a selection. Search - Links to a search tool for the document. Tag - A tag (keyword) for the current document.
EDD Download ID | select | link_edd_id | - | All EDD downloads | Select Easy Digital Downloads download ID.
Menu as Dropdown | select | link_menu | - | - | Select a menu. These are the menus created under Appearance -> Menu.
Post/Page/CPT | select | link_post | 0 | 0, 1 | Select a post, page or custom post type.
URL | text | link | - | - | Add a custom URL.
Redirect URL | text | link_redirect_url | - | - | Only add the last part of the url where you would like to redirect user. If the full URL is http://wwww.example.com/my-page/ then only add `/my-page/` in this field. The other part of the URL is computed automatically.
Woocommerce Product ID | select | link_woocommerce_id | - | All WooCommerce products | Select a Woocommerce product ID.

## Margin #back to top

Margin options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Top | range | margin_top | 0 | - | Set top margin for button.
Bottom | range | margin_bottom | 0 | - | Set bottom margin for button.
Left | range | margin_left | 0 | - | Set left margin for button.
Right | range | margin_right | 0 | - | Set right margin for button.

## Padding #back to top

Padding options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Top | range | padding_top | 0 | - | Set top padding for button.
Bottom | range | padding_bottom | 0 | - | Set bottom padding for button.
Left | range | padding_left | 0 | - | Set left padding for button.
Right | range | padding_right | 0 | - | Set right padding for button.

## Preview #back to top

Button preview options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Background | colorpicker | - | - | - | This field is very helpful in deciding background color for a button when the button is to be used over a colored background (not white). By changing the preview background you will get exact look of the button over a colored background that is not white.

## Primary Text #back to top

Button primary text options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Text
Text | text | text | - | - | Add main button text.
Transform | select | text_transform | - | capitalize, uppercase, lowercase, inherit | This field controls the capitalization of text.
Font
Font Size | range | text_font_size | 21 | - | Add font size in pixels. This will make your primary text bigger or smaller depending up on the value specified.
Font Style | select | text_font_style | normal | normal, italic, oblique, inherit | Select font style. This will style your additional text. Normal means as it is, italic means the text will appear slanted, oblique makes the text slanted + bold and inherit will get the style from parent element.
Font Weight | select | text_font_weight | normal | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit | Select font weight. This adds weight to text like bold makes the text stronger. 100 is lightest and 900 is boldest.
Font Family | select | text_font_family | - | All Google Web Fonts | Select font family. Choose from among 100's of Google Web Fonts to style primary text.
Color
Normal | colorpicker | text_color_normal | #999 | - | Select text color.
Hover | colorpicker | text_color_hover | #777 | - | Select text color for when button is hovered.
Shadow
Horizontal | range | text_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels.
Vertical | range | text_shadow_vertical | - | - | Add position of the vertical shadow in pixels.
Blur | range | text_shadow_blur | - | - | Add blur radius in pixels.
Color | colorpicker | text_shadow_color | - | - | Pick shadow color.
Padding
Top | range | text_padding_top | 0 | - | Set top padding for primary text.
Bottom | range | text_padding_bottom | 0 | - | Set bottom padding for primary text.
Left | range | text_padding_left | 0 | - | Set left padding for primary text.
Right | range | text_padding_right | 0 | - | Set right padding for primary text.

## Secondary Text #back to top

Button secondary text options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Text
Text | text | text_secondary | - | - | Add additional text for button.
Transform | select | text_secondary_transform | - | capitalize, uppercase, lowercase, inherit | This field controls the capitalization of text.
Position | select | text_secondary_position | - | same_line, new_line | Select additonal text position. Put the text on the same line as primary text or move it to a new line.
Alignment | select | text_secondary_alignment | - | left, right, center | Align the additional text as required. Left moves the text to the left of button, right moves the text right of the button and center keeps the text centered.
Font
Font Size | range | text_secondary_font_size | 21 | - | Add font size in pixels. This will make your primary text bigger or smaller depending up on the value specified.
Font Style | select | text_secondary_font_style | normal | normal, italic, oblique, inherit | Select font style. This will style your additional text. Normal means as it is, italic means the text will appear slanted, oblique makes the text slanted + bold and inherit will get the style from parent element.
Font Weight | select | text_secondary_font_weight | normal | normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit | Select font weight. This adds weight to text like bold makes the text stronger. 100 is lightest and 900 is boldest.
Font Family | select | text_secondary_font_family | - | All Google Web Fonts | Select font family. Choose from among 100's of Google Web Fonts to style primary text.
Color
Normal | colorpicker | text_secondary_color_normal | #999 | - | Select text color.
Hover | colorpicker | text_secondary_color_hover | #777 | - | Select text color for when button is hovered.
Shadow
Horizontal | range | text_secondary_shadow_horizontal | - | - | Add position of the horizontal shadow in pixels.
Vertical | range | text_secondary_shadow_vertical | - | - | Add position of the vertical shadow in pixels.
Blur | range | text_secondary_shadow_blur | - | - | Add blur radius in pixels.
Color | colorpicker | text_secondary_shadow_color | - | - | Pick shadow color.
Padding
Top | range | text_secondary_padding_top | 0 | - | Set top padding for secondary text.
Bottom | range | text_secondary_padding_bottom | 0 | - | Set bottom padding for secondary text.
Left | range | text_secondary_padding_left | 0 | - | Set left padding for secondary text.
Right | range | text_secondary_padding_right | 0 | - | Set right padding for secondary text.

## Shadow #back to top

Button shadow options comes under this tab.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Normal [Repeatable]
Horizontal | range | shadow_horizontal | - | - | Set horizontal shadow in pixels.
Vertical | range | shadow_vertical | - | - | Set vertical shadow in pixels.
Blur | range | shadow_blur | - | - | Set blur radius in pixels.
Spread | range | shadow_spread | - | - | Set shadow spread in pixels.
Position | select | shadow_position | - | outset, inset | Set shadow position.
Color | colorpicker | shadow_color | - | - | Set shadow colour.
Hover [Repeatable]
Horizontal | range | shadow_horizontal_hover | - | - | Set horizontal shadow in pixels.
Vertical | range | shadow_vertical_hover | - | - | Set vertical shadow in pixels for when the button will be hovered.
Blur | range | shadow_blur_hover | - | - | Set blur radius in pixels for when the button will be hovered.
Spread | range | shadow_spread_hover | - | - | Set shadow spread in pixels for when the button will be hovered.
Position | select | shadow_position_hover | - | outset, inset | Set shadow position for when the button will be hovered.
Color | colorpicker | shadow_color_hover | - | - | Set shadow colour for when the button will be hovered.
CSS
Normal | css editor | shadow_css | - | - | Set custom box shadow CSS.
Hover | css editor | shadow_css_normal | - | - | Set custom box shadow CSS for when the button will be hovered.

## Additional #back to top

Button additional options that are used mainly in short code to over ride a value. These options are not added to the options panel.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
CSS Inline | - | css_inline | - | exterrnal, inline | Use this attribute to over ride Buttons X CSS settings for a particular button.

## Social Buttons #back to top

In this section you will learn in detail on how to create social buttons and the various options available under social buttons.

## Creating a Social Button #back to top

Buttons X makes it easy for users to create social buttons without having to write single line of code. Let's get started!

1. Once in dashboard, navigate to Social Buttons > Add new.
2. In this example we will be creating a Facebook horizontal share button. Facebook button is enabled by default. You can enable other buttons as required. Now click the Facebook tab as shown in the image below.
3. Now we will configure Facebook button options.
   - Select 'Share' option under Button Type field.
   - Enter a custom URL if required otherwise leave blank. Facebook share button will automatically share the link of the page on which the button is placed if URL field left blank.
   - Select 'Button Count' under Layout field.
4. Finally, we have our share button ready. Give your button a title and publish / save the button and you are done! (Optionally you can also add the button under a pack and add tags so that it is easy to find when you have a lot of buttons.

In the next tutorial we will learn on how to use social buttons on post / page or custom post types. Thank you for checking out this tutorial.

## Using Social Buttons on Posts & Pages #back to top

In this tutorial we will learn to use social buttons on our website. I will assume that you have already read the tutorial on how to create social buttons. If you haven't then check it out first - Creating a Social Button.

Let's get started!

1. After you have created all required social buttons navigate to 'Buttons' > 'Settings'. Under settings click 'Social' tab as shown in image below. Select the post types to enable social button's support. This enables social button meta box on each of the select post types from where we can configure our buttons..
2. I have selected post and page where I would like to show my social buttons. Now navigate to one of the post type you selected. I will be creating a new blog post so I will navigate to 'Posts' > 'Add New'. It works the same for other post types. Just navigate to the respective 'post type' > 'Add New' or one of your already created post / page or custom post.
3. Once you are on the 'Add New' or 'Edit Post' page look for 'Buttons X - Social Buttons' meta box on the sidebar. Under it you will find two multi select fields, one for displaying the social buttons before content and other for displaying buttons after content. I created share buttons with vertical count which I will be selecting here and I would want the buttons to appear below post title and after post content. Since I created all buttons together so I will select the button named 'All Vertical Share Buttons' but you can create social buttons individually and select them all (multi select).
4. After saving the post, click 'View Post' or 'Preview Changes'. And you should the see the buttons before and after post content as shown in the image below.

Thank you for checking out this tutorial!

## Export & Import #back to top

In this section you will learn how to export and import buttons. Here it is assumed that you have already created a few buttons and that the buttons list is not empty.

#### EXPORT

Single Button Export

1. Navigate to 'Buttons' > 'Buttons'.
2. Hover over a button row and you will see button action links under button name.
3. Now click on 'Export'.
4. Once clicked a '.json' file will be downloaded to your computer.
5. That's it! You have exported a button.

Bulk Export

1. Navigate to 'Buttons' > 'Buttons'.
2. Select the buttons you would like to export.
3. Select 'Export' under 'Bulk Actions' (can be found at the top or bottom of the page).
4. Once 'Export' is selected click 'Apply'.
5. Once clicked a '.json' file will be downloaded to your computer.
6. Great! You have exported buttons in bulk.

#### IMPORT

One Click Import

1. This import option is basically to import demo buttons packed with the plugin. This makes it very easy for you to get started with Buttons X.
2. Navigate to 'Buttons' > 'Import'.
3. Under import page the very first tab is 'Demo Buttons'.
4. Click 'Import' and you will be notified about each button that is being imported.
5. That's it! Navigate to 'Buttons' > 'Buttons' to check imported buttons.
6. You can modify these buttons or use as is. And you can import these buttons any number of times.

Manual Import

1. This import option is to let you import those buttons that you have exported.
2. Navigate to 'Buttons' > 'Import'.
3. Click 'Manual Import' tab..
4. Under 'Manual Import' tab upload the '.json' file that you exported / downloaded.
5. Click 'Import' and you will be notified about each button that is being imported.
6. That's it! Navigate to 'Buttons' > 'Buttons' to check your imported buttons.

Thank you for checking out this tutorial!

## Cloning a Button #back to top

In this section we will demonstrate you on how to clone a button. Here it is assumed that you have already created a few buttons and that the buttons list is not empty.

1. Navigate to 'Buttons' > 'Buttons'.
2. Hover over a button row and you will see button action links under button name.
3. Now click on 'Clone'.
4. Once clicked you will be taken to the cloned button edit page. It will be an exact copy of your button.
5. Change the button title and the options fields that require modifications and save the button.
6. That's it! You have a new button.

Bulk Export

1. Navigate to 'Buttons' > 'Buttons'.
2. Select the buttons you would like to export.
3. Select 'Export' under 'Bulk Actions' (can be found at the top or bottom of the page).
4. Once 'Export' is selected click 'Apply'.
5. Once clicked a '.json' file will be downloaded to your computer.
6. Great! You have exported buttons in bulk.

#### IMPORT

One Click Import

1. This import option is basically to import demo buttons packed with the plugin. This makes it very easy for you to get started with Buttons X.
2. Navigate to 'Buttons' > 'Import'.
3. Under import page the very first tab is 'Demo Buttons'.
4. Click 'Import' and you will be notified about each button that is being imported.
5. That's it! Navigate to 'Buttons' > 'Buttons' to check imported buttons.
6. You can modify these buttons or use as is. And you can import these buttons any number of times.

Manual Import

1. This import option is to let you import those buttons that you have exported.
2. Navigate to 'Buttons' > 'Import'.
3. Click 'Manual Import' tab..
4. Under 'Manual Import' tab upload the '.json' file that you exported / downloaded.
5. Click 'Import' and you will be notified about each button that is being imported.
6. That's it! Navigate to 'Buttons' > 'Buttons' to check your imported buttons.

Thank you for checking out this tutorial!

## Extensions #back to top

Buttons X button builder plugin supports extensions. It comes with two free extensions, analytics and tooltip.

#### Contents

- Installation
- Analytics Extension
- Tooltip Extension

## Installation #back to top

Buttons X extensions are installed in the same manner as you install a WordPress plugin. Please read Plugin Installation for more details.

## Analytics Extension #back to top

Detail information about analytic options can be found below.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Google
Enable | checkbox | analytics_google | 0 | 0, 1 | Enable Google analytics to track button click events. You must have Google analytics enabled on your website.
Tracking Variable | text | analytics_google_tracking_variable | ga | - | If using universal tracking then most probabily the tracking variable would be ga. It might also be possible that you have a different tracking variable. For example: If you use the free version of Google Analytics by yoast then the tracking variable will be __gaTracker. You can easily check which tracking variable being used on your website (check below).
Event Category | text | analytics_google_event_category | - | - | It is typically the object that was interacted with (e.g. button).
Event Label | text | analytics_google_event_label | - | - | Useful for categorizing events (e.g. cart buttons).
Event Value | text | analytics_google_event_value | - | - | Values must be non-negative. Useful to pass counts (e.g. 4) times.
Do not impact bounce rate | checkbox | analytics_google_event_nointeraction | 0 | 1 | Send an event without impacting the bounce rate.

#### Tracking Variable

In order to find the tracking variable follow the below steps:

1. Navigate to the page where the button is displayed.
2. Right click the mouse and choose 'View Page Source'.
3. Inside the `head` section search for a similar code as shown in image below. That is your tracking variable.

## Tooltip Extension #back to top

Detail information about analytic options can be found below.

#### Available Options:

Field Label | Field Type | Short Code Attribute | Default Value | Available Values | Description
--- | --- | --- | --- | --- | ---
Tooltip Text | text | tooltip_text | - | - | Insert text for tooltip. HTML is allowed.
Tooltip Animation | select | tooltip_animation | - | fade, fall, grow, slide, swing | Select tooltip animation type.
Tooltip Position | select | tooltip_position | top | bottom, bottom-left, bottom-right, left, right, top, top-left, top-right | Select tooltip position.
Tooltip Theme | select | tooltip_theme | tooltipster-light | tooltipster-default, tooltipster-light, tooltipster-noir, tooltipster-punk, tooltipster-shadow, tooltipster-btnsx | Select tooltip theme style.

Once the options are configured hover the button in preview to test tooltip.

Thanks for checking out!

## Support Desk #back to top

Support is provided only through ticketing system. I highly recommend that you read the new support policy for complete details.

#### What's included in item support

1. The item support period.
2. Answering questions about how to use the item.
3. Answering technical questions about the item (and included third party assets).
4. Help with defects in the item or included third party assets.
5. Item updates to ensure ongoing compatibility and to resolve security vulnerabilities.

#### What's not included in item support

1. Item customization.
2. Installation of the item.
3. Hosting, server environment, or software.
4. Help with defects in the item or included third party assets.
5. Help from authors of included third party assets.

#### What’s included in all item purchases

1. Updates to ensure the item works as described and is protected against major security concerns.
2. Included version updates for all items.

#### Please make sure you do / include the following information for quick and smooth support

- Prepare your installation
  Disable your other plugins and switch to the default WordPress theme before you create the ticket. Please test this before opening your ticket so we can know if there's a conflict that needs to be resolved.
- Purchase Code
  If you do not include a purchase code, we may request this information as our first response.
- Link to your site
  If something isn't working, please send us a link to the page where it isn't working.
- Include a WordPress login (admin acess)
  The fastest way for us to help is for us to view your backend setup.

## Files & Sources #back to top

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included JavaScript codes under btnsx/assets/

1. AnimateCSS - https://daneden.github.io/animate.css/
2. MaterializeCSS - http://materializecss.com/

Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this plugin. All included JavaScript codes under btnsx/assets/

.

1. Wow.js - http://mynameismatthieu.com/WOW/index.html
2. Ace Editor - http://ace.c9.io/#nav=about
3. Codestar WP Color Picker - https://github.com/Codestar/codestar-wp-color-picker
4. Select2 - https://select2.github.io

Included Icons

These are the various attribution inks to the icons included or modified to work with in this plugin. All included JavaScript codes under btnsx/assets/

1. Font Awesome - http://fortawesome.github.io/Font-Awesome/
2. IcoMooon - https://icomoon.io

Miscellaneous

1. Codrops - http://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/
2. Google Fonts - https://www.google.com/fonts
3. Facebook
4. Twitter
5. GooglePlus
6. LinkedIn

## Version History (Changelog) #back to top

You can find the version history (changelog.txt) file inside Btnsx-full.zip file or you can check changelog on plugin description page.

Once again, thank you so much for purchasing this plugin. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.

#### Changelog

Check Release Notes.