Button

Border Style

[button url="#" color="default" effect="flat" button_base="border" border_style="square" size="small" target="_parent"] Button Text [/button]
[button url="#" color="default" effect="flat" button_base="border" border_style="square" size="medium" target="_parent"] Button Text [/button]
[button url="#" color="default" effect="flat" button_base="border" border_style="square" size="large" target="_parent"] Button Text [/button]

Fill Style

[button url="#" color="default" effect="flat" button_base="fill" border_style="square" size="small" target="_parent"] Button Text [/button]
[button url="#" color="default" effect="flat" button_base="fill" border_style="square" size="medium" target="_parent"] Button Text [/button]
[button url="#" color="default" effect="flat" button_base="fill" border_style="square" size="large" target="_parent"] Button Text [/button]

Embossed Style

[button url="#" color="default" effect="flat" button_base="embossed" border_style="square" size="small" target="_parent"] Button Text [/button]
[button url="#" color="default" effect="flat" button_base="embossed" border_style="square" size="medium" target="_parent"] Button Text [/button]
[button url="#" color="default" effect="flat" button_base="embossed" border_style="square" size="large" target="_parent"] Button Text [/button]

Gradient Style

[button url="#" color="green" effect="gradient" button_base="fill" border_style="square" size="small" target="_parent"] Button Text [/button]
[button url="#" color="green" effect="gradient" button_base="fill" border_style="square" size="medium" target="_parent"] Button Text [/button]
[button url="#" color="green" effect="gradient" button_base="fill" border_style="square" size="large" target="_parent"] Button Text [/button]

Gradient Embossed Rounded Style

[button url="#" color="red" effect="gradient" button_base="embossed" border_style="rounded" size="small" target="_parent"] Button Text [/button]
[button url="#" color="red" effect="gradient" button_base="embossed" border_style="rounded" size="medium" target="_parent"] Button Text [/button]
[button url="#" color="red" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="skyblue" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="pink" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="bright_blue" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="skygreen" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="violet" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="grey" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]
[button url="#" color="dark_grey" effect="gradient" button_base="embossed" border_style="rounded" size="large" target="_parent"] Button Text [/button]

And many more styles!

Button Options

  • id: add a unique ID to the shortcode.
  • class: add a class or multiple classes to the shortcode.
  • animation: “fade_in”, “move_left”, “move_right”, “move_up”, “scale_up”, “little_bounce”, “fade_in_down”, “fade_in_left”, “fade_in_right”.
  • url: Add the button’s url e.g. http://example.com.
  • color: “default”, “green”, “skyblue”. “red”, “pink”, “bright_blue”, “skygreen”, “white”, “violet”, “grey”, “dark_grey”.
  • button_base: “border”, “fill”, “embossed”.
  • border_style: “square”, “rounded”.
  • effect: “flat”, “gradient”.
  • size: “small”, “medium”, “large”.
  • content: Add Button’s Label.
  • target: “_parent”, “_self”, “_blank”.