Button Shortcode

Last Updated on

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

In this article


Displaying a Button Shortcode

To add a button shortcode to a page or post:

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

Button Shortcode - visual composer screen

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

Button Shortcode - add element

4
When 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

5
Click 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

x
Note: This option can be used by enabling Full Width Button option. For more detail, read Configuring the width section.

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

Setting Description
StyleSets the button style. Options are 3D, 2D, Flat, Outline, Savvy, Double Outline.
Corner StyleSets the corner style. Options are Pointed, Rounded, Full Rounded.
Button Background ColorSets the background color of the button. Option can be found under the Colors tab.
Button SkinSets 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 ColorSets 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 ColorSets 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 SpacingSets 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
SizeSets the button size. Options are Small, Medium, Large, X-Large, XX-Large.
Full Width ButtonSets the button width. This option makes the button full width and cover one row.
Custom Button WidthSets 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 TopSets the button top margin. Default value is 0 pixel.
Margin BottomSets the button bottom margin. Default value is 15 pixel.
Margin RightSets 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
AlignSets 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 IconSets 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.

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

Setting Description
Button URLSets the button URL.
Select Specific ProductAdds a product as the button URL. Once the button is clicked, the product gets added to the cart.
TargetSets the link target. Options are New Window, Same Window.
Add Rel:nofollow To The LinkNofollow 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 IDSets 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket