The button shortcode allows you to display a clickable button. The button text should be between the opening and closing shortcodes. The options for this shortcode are shown below. See examples here.
| Option | Default | Example | Description | |
|---|---|---|---|---|
| button_drop | (empty) | button_drop="Hey, here is more information related to this button" | Add a dropdown box with extra content related to your button. | |
| palette | (empty) | palette="[your_palette_id]" | First create a color palette in Theme Options – Design – Color. Once created you can assign the palette to the drop down content, this will means all content within it will be assigned the new colors. | |
| hover_animation | (empty) | hover_animation="hvr-shrink" | Add an animation when the button is hovered, use the shortcode generator to see available options. | |
| animation | (empty) | animation="fadeIn" | Add an animation when the button comes into view, use the shortcode generator to see available options. | |
| animation_delay | (empty) | animation_delay="1500" | The animation will not start until this number of milliseconds after the element comes into view (1000 milliseconds = 1 second). | |
| animation_offset | (empty) | animation_offset="200" | If the number is positive, the animation will start when the element is this number of pixels below the viewport. If the number is negative, the animation will not start until the element is this number of pixels inside the viewport. | |
| size | small | size="large" | The type of box will determine how it looks:
| |
| radius | (empty) | radius="big-corners" | Corner radius:
| |
| text_align | textcenter | text_align="textright" | Text alignment for the button. Options:
| |
| position | (empty) | position="center" | The position of the button within the container. Options:
| |
| custom_margin | 0 | custom_margin="1" | You can override the default margins with your own values using the options below; 1 is true 0 is false. | |
| margin_top | 0 | margin_top="5" | The CSS margin-top in pixels. | |
| margin_right | 0 | margin_right="5" | The CSS margin-right in pixels. | |
| margin_bottom | 0 | margin_bottom="5" | The CSS margin-bottom in pixels. | |
| margin_left | 0 | margin_left="5" | The CSS margin-left in pixels. | |
| gradient | 0 | gradient="1" | Adds a CSS3 gradient effect to the button. | |
| convert | cvt-phone-ptr | convert="cvt-phone-ldsp" | This is a responsive option. It gives you the choice to select when you want to swap to a small device friendly layout:
| |
| hide | (empty) | hide="hide-phone" | This gives you the ability to hide the button on the devices you select:
| |
| href | (empty) | href="http://www.example.com" | The destination URL. | |
| class | (empty) | class="button_one" | Add a classes to add to the button. | |
| popup | 0 | popup="1" | The link will open in a new tab/window. | |
| icon | (empty) | icon="icon-heart" | The icon will show to the left of the button text, see the shortcode generator for available icons. | |
| icon_location | ico-abso i-left | icon_location="ico-above" | Choose a location for the icon:
| |
| icon_style | lgt | icon_style="drk" | If the chosen icon is an image icon, choose a light or dark style. Options:
| |
| icon_reveal | 0 | icon_reveal="1" | Reveal icon on hover. | |
| color | style-prime blank-btn | color="style-orange" | Choose a color for your button, see the shortcode generator for available options. |
Examples
[button href="http://www.example.com"]Click me[/button]
[button href="http://www.example.com" color="hollow-prime holw-btn" popup="1"]Click me[/button]