1 minute read

Button shortcode


  • color – set predefinied color or use custom class, exemplary values: “orange”, “green”, “turquoise”, “azure”, “blue”, “purple”, “pink”, “red”, “brown”, “dark-gray”, “light-gray”, “custom”.
  • size – set size of the button, exemplary values “small”, “normal”, “large”, “x-large”, “xx-large”.
  • shape – set shape of the button, exemplary values “square”, “round”, “rounded”.
  • type – set style type of the button, for example “boxed”, “unboxed”, “double”, “outline”, “vista”, “simple”, “classic”.
  • link – set link URL, for example “http://thememotive.com/”.
  • open_in_new_window – open link in new window, possible values: “yes” or “no”.
  • icon_left – icon name from Font Awesome, for example “fa-shopping-cart”.
  • icon_right – icon name from Font Awesome, for example “fa-angle-double-right”.
  • wide – optional set the button as wide, possible values: “yes” or “no”.
  • class – add a CSS class.
  • id – add an unique id.
  • style – add an inline style.
  • rel – add a rel attribute, value can be for example “nofollow”.

Exemplary usage:

[button color="orange" size="large" shape="rounded" type="double" link="http://thememotive.com/" open_in_new_window="yes" icon_left="" icon_right="fa-angle-double-right" wide="no" class="" id="" style="" rel=""]Go to our website[/button]

See also demo of button shortcode. In full download package (Dummy data/shortcodes-pages/button.html) You can find the file with shortcodes we used to create demo page.

Did you know...

You can use button element in drag and drop website builder (Visual Composer) and customize this element easily without coding skills. Parameters and design options are the same as in shortcode.