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 eight 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.

Ken Button Demo 7

In this article


Displaying a Button

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 8 main design styles and some other features that let you change the shortcode according to your needs. These are Text style, Size, Spacing, Alignment and Animation.

Configuring the Button’s Design Style

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

Flat

Button Shortcode - flat button

3D

Button Shortcode - 3d button

Outline

Button Shortcode - outline button

Line

Button Shortcode - line button

Fill

Button Shortcode - fill button

Nudge

Button Shortcode - outline button

Radius

Button Shortcode - outline button

Fancy Link

Button Shortcode - outline button

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

Setting Description
StyleSets the button style. Options are Flat, 3D, Outline, Line, Fill, Nudge, Radius and Fancy Link.
Corner StyleSets the corner style. Options are Pointed, Rounded and Full Rounded.
Button Background ColorUse this option to set the background color of the button. This option will work for styles that can have a background color.
Underline ColorUse this option to set the underline color for the button. This option will only be available for styles that can have an underline.
Outline Button SkinUse this option to set the outline color of the button. This option will be available for styles with outline mode.
Outline Button Border WidthUse this option to set the thickness of the outline border for the button. This option will be available only on styles with an outline.
Nudge Button SkinUse this option to set the color of the button in Nudge mode.

Adding the Button Icon

You can add an icon from the Ken’s Icon library to the button using the Add Icon Class Name option.

Configuring the Button’s Text and Text Style

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

Setting Description
Button TextUse this option to add the button text.
Button Text ColorUse this option to set the color of the button text.
Outline Button Hover TextUse this option to set the outline color of the button on mouseover. This option will be available for styles with outline mode.

Configuring the Button’s Size

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

Setting Description
SizeUse this option to select the size of the button. Available options are Small, Medium, Large, X Large, XX Large.

Configuring the Spacing

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

Setting Description
Margin BottomUse this option to add an extra blank space at the bottom of the button to avoid having the rest of the content stick to the bottom of the button. The value entered for this option is in pixels. Default value is 15 pixel.

Configuring the Alignment

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

Setting Description
AlignUse this option to set the alignment of the button. Available options are Left, Center and Right.

Configuring the Hover Animation

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

Setting Description
Infinite AnimationsUse this option if you want to add a moving animation to your button. This animation will loop infinitely. Available options are None, Float Vertically, Float Horizontally, Pulse, Tossing, Spin and Flip Horizontally.

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

Setting Description
Button URLUse this option to add a link to the button. You need to add https:// at the beginning of the URL for the button.
TargetUse this option to decide if you want to have the button link open up in the same window or in a new separate one. Available options are Same Window and New Window

Adding an ID

Button shortcode settings 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.

Setting Description
Button IDUse this option to add an ID for this button. This will give you a way to refer to this button in the future for your Custom CSS or Javascript code. For example if you write “contact” for this option, in order to access the button you need to add this link in your code: #contact

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.


Extra Class Name

This is an option which is common amongst most shortcodes. If you wish to style a particular content element differently, then use this field to add a class name and then refer to it in the Custom CSS settings inside Theme Settings -> Custom CSS.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket