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.
Displaying a Button
To add a button shortcode to a page or post:
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
3D
Outline
Line
Fill
Nudge
Radius
Fancy Link
There are some settings in Button Settings pop-up regarding the Button’s design style.
| Setting | Description |
|---|---|
| Style | Sets the button style. Options are Flat, 3D, Outline, Line, Fill, Nudge, Radius and Fancy Link. |
| Corner Style | Sets the corner style. Options are Pointed, Rounded and Full Rounded. |
| Button Background Color | Use this option to set the background color of the button. This option will work for styles that can have a background color. |
| Underline Color | Use 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 Skin | Use this option to set the outline color of the button. This option will be available for styles with outline mode. |
| Outline Button Border Width | Use 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 Skin | Use 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 Text | Use this option to add the button text. |
| Button Text Color | Use this option to set the color of the button text. |
| Outline Button Hover Text | Use 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 |
|---|---|
| Size | Use 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 Bottom | Use 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 |
|---|---|
| Align | Use 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 Animations | Use 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. |
Configuring the Link
There are some settings in Button Settings pop-up regarding the Button link.
| Setting | Description |
|---|---|
| Button URL | Use this option to add a link to the button. You need to add https:// at the beginning of the URL for the button. |
| Target | Use 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 ID | Use 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.
