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
Displaying a Button Shortcode
To add a button shortcode to a page or post:
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
2D
Flat
Outline
Savvy
Double Outline
Full Width
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.
