Buttons

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:

  • tiny – Tiny
  • small – Small
  • med – Medium
  • large – Large
  • full – Full small (use all width)
  • full med – Full medium (use all width)
  • full large – Full large (use all width)
radius (empty) radius="big-corners" Corner radius:

  • (empty) – Default
  • big-corners – Rounded
  • no-corners – Square
text_align textcenter text_align="textright" Text alignment for the button. Options:

  • textleft – Left
  • textcenter – Center
  • textright – Right
position (empty) position="center" The position of the button within the container. Options:

  • (empty) – Auto (Left on LTR, Right on RTL)
  • left – Left
  • center – Center
  • right – Right
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:

  • cvt-phone-ptr – Phone portrait
  • cvt-phone-ldsp – Phone landscape
  • cvt-tablet-ptr – Tablet landscape
  • cvt-tablet-ldsp – Tablet landscape
hide (empty) hide="hide-phone" This gives you the ability to hide the button on the devices you select:

  • (empty) = None
  • hide-phone-ptr = Phone portrait
  • hide-phone = Phone landscape
  • hide-tablet-ptr = Tablet portrait
  • hide-tablet = Tablet landscape
  • hide-desktop = Desktop
  • hide-large = Large
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:

  • ico-abso i-left – Fixed left
  • ico-abso i-right – Fixed right
  • ico-inline i-after – After text
  • ico-inline i-before – Before text
  • ico-above – Above text
icon_style lgt icon_style="drk" If the chosen icon is an image icon, choose a light or dark style. Options:

  • lgt – Light
  • drk – Dark
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]

Still having trouble? Head over to the forums.

Forums