Button Shortcode

Updated on February 6, 2018

The button shortcode allows you to display animated buttons in various styles, sizes and colors. These fully customizable buttons can be used in seven different styles. Each style also has other customizable features such as corner radius, and hover animation.

To see the Button shortcode in action, check out the demo page

Button Shortcode - demo


Displaying a Button Shortcode

To add a button shortcode to a page or post:

1Add a new page or edit an existing page.
2In the Visual Composer section, Click on the + button.

Button Shortcode - visual composer screen

3In Add Element pop-up screen, search for Button and click on it to be added to the page.

Button Shortcode - add element

4When the shortcode is added, a new pop-up screen called Button Settings will open that allows you to configure the shortcode settings. Enter your Button text.

Button Shortcode - Button Settings

5Click Save Changes and Publish or Update the page to check the result.

Configuring the Style

Button shortcode has 7 main design styles and some other features that let you change the shortcode according to your needs. These are Text style, Size, Width, Spacing, Alignment and Animation.

Configuring the Button’s Design Style

As we mentioned, Button shortcode has 7 design styles that lets you display the button with different colors, border styles and animations. Here is the style list:

3D

Button Shortcode - 3d button

2D

Button Shortcode - 2d button

Flat

Button Shortcode - flat button

Outline

Button Shortcode - outline button

Savvy

savvy button

Double Outline

Button Shortcode - double outline button

Full Width

Button Shortcode - full width button

There are some settings in Button Settings pop-up regarding the Button’s design style.

Setting Description

Style Sets the button style. Options are 3D, 2D, Flat, Outline, Savvy, Double Outline.
Corner Style Sets the corner style. Options are Pointed, Rounded, Full Rounded.
Button Background Color Sets the background color of the button. Option can be found under the Colors tab.
Button Skin Sets the button skin color. Options are Dark Color, Light Color, Custom Color. This option is active only when Outline, Savvy, Double Outline is selected as Style. Option can be found under Colors tab.
Button Background Color (Hover) Sets the hover background color of the button. You can set custom color when Flat, Outline, Savvy, Double Outline is selected as Style. Option can be found under Colors tab.

Adding the Button Icon

You can add a icon from the Jupiter library to the button using the Add Icon option.

Configuring the Button’s Text Style

There are some settings in Button Settings pop-up regarding the Button’s text style.

Setting Description

Button Text Color Sets the text color. Options are Dark and Light when 3D, 2D, Flat is selected as Style. You can set custom color when Outline, Savvy, Double Outline is selected as Style. Option can be found under Colors tab.
Button Hover Text Color Sets the hover text color. You can set custom color when Outline, Savvy, Double Outline is selected as Style. Option can be found under Colors tab.
Button Text Letter Spacing Sets the space between letters.

Configuring the Button’s Size

There are some settings in Button Settings pop-up regarding the Button’s size.

Setting Description

Size Sets the button size. Options are Small, Medium, Large, X-Large, XX-Large.
Full Width Button Sets the button width. This option makes the button full width and cover one row.
Custom Button Width Sets the button width with custom value.

Configuring the Spacing

There are some settings in Button Settings pop-up regarding the Button’s spacing.

Setting Description

Margin Top Sets the button top margin. Default value is 0 pixel.
Margin Bottom Sets the button bottom margin. Default value is 15 pixel.
Margin Right Sets the button right margin. Default value is 15 pixel.

Configuring the Alignment

There is a setting in Button Settings pop-up regarding the Button’s alignment.

Setting Description

Align Sets the button alignment. Options are Left, Right, Center, None.

Configuring the Hover Animation

There is a setting in Button Settings pop-up regarding the Button’s hover animation.

Setting Description

Animate Icon Sets the icon animation. Options are No Animation, Side Animation, Vertical Animation. This option is available only when 3D, 2D, Savvy, Flat, Outline is selected as Style. Before adding the animation, add the icon using the “Add Icon” option.

Configuring the Link

There are some settings in Button Settings pop-up regarding the Button link.

Setting Description

Button URL Sets the button URL.
Select Specific Product Adds a product as the button URL. Once the button is clicked, the product gets added to the cart.
Target Sets the link target. Options are New Window, Same Window.
Add Rel:nofollow To The Link Nofollow provides a way for you to tell search engines “Don’t follow this specific link.”. So you instruct search engines that the hyperlink should not influence the ranking of the link’s target in the search engine’s index.

Adding an ID

Button shortcode settings section contains a field that let you set an ID for the shortcode. You can set an ID and refer it in your Javascript or CSS code. There are some important points about deciding about an ID. You should not use any space, symbols (except – hyphen) and non-latin characters in ID.

There is a setting in Button Settings pop-up regarding the Button’s ID.

Setting Description

Button ID Sets the button ID.

Adding a Viewport Animation

To make the Button shortcode visible on scroll with animation, there is a setting in Button settings pop-up which is called Viewport Animation. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read Configuring shortcode’s entrance animation article.


Configuring the Visibility for Devices

To make the Button shortcode visible only for some devices such as Phones, Tablets, Mega Tablets, Netbooks, Desktops, there is a setting in Button settings pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read Configuring the visibility for devices article.

Did this answer your question?