Button Shortcodes

3 Different Sizes

Small Button Medium Button Big Button
Get The Code

[button size="small" link="/" icon="heart"]Small Button[/button]

[button size="medium" link="/" icon="heart"]Medium Button[/button]

[button size="big" link="/" icon="heart"]Big Button[/button]

2 Alternatives Styles

Simple Button Solid Button
Get The Code

[button size="medium" link="/" style="simple" icon="heart"]Simple Button[/button]

[button size="medium" link="/" style="solid" icon="laptop"]Solid Button[/button]

Top

2 Different Types

Simple Button Wide Button
Get The Code

[button size="medium" link="/" type="simple" style="simple"]Simple Button[/button]

[button size="medium" link="/" type="wide" style="simple"]Wide Button[/button]

Top

Multiline label

Small button Second Line Medium button Second Line Big button Second Line

Small button Second Line Medium button Second Line Big button Second Line

Get The Code

[button size="small" link="/"]Small button <small>Second Line</small>[/button]
[button size="medium" link="/"]Medium button <small>Second Line</small>[/button]
[button size="big" link="/"]Big button <small>Second Line</small>[/button]

[button size="small" link="/" style="simple"]Small button <small>Second Line</small>[/button]
[button size="medium" link="/" style="simple"]Medium button <small>Second Line</small>[/button]
[button size="big" link="/" style="simple"]Big button <small>Second Line</small>[/button]

Top

Linking Methods

Open in a same window Open in a new window
Open Image in a lightbox Open Movie in a lightbox Open Google Map in a lightbox

Get The Code

[button size="medium" link="https://vimeo.com/12613824" linking="default"]Open in a same window[/button]
[button size="medium" link="https://vimeo.com/12613824" linking="new-window"]Open in a new window[/button]

[button size="medium" link="/wp-content/uploads/2013/05/photo_08_v01.jpg" linking="lightbox" style="simple"]Open Image in a lightbox[/button]
[button size="medium" link="https://vimeo.com/12613824" linking="lightbox" style="simple"]Open Movie in a lightbox[/button]
[button size="medium" style="simple" link="https://maps.google.pl/maps?q=New+York&hl=pl&sll=51.127065,16.991864&sspn=0.08845,0.264187&hnear=Nowy+Jork,+Stany+Zjednoczone&t=m&z=13" linking="lightbox"]Open Google Map in a lightbox[/button]

Top

Custom Color Scheme

YellowOrangeRedPurpleBlueGreen

Get The Code

[button size="medium" link="/" bg_color="#f1c40f" text_color="#ffffff"]Yellow[/button]
[button size="medium" link="/" bg_color="#e67e22" text_color="#ffffff"]Orange[/button]
[button size="medium" link="/" bg_color="#e74c3c" text_color="#ffffff"]Red[/button]
[button size="medium" link="/" bg_color="#9b59b6" text_color="#ffffff"]Purple[/button]
[button size="medium" link="/" bg_color="#3498db" text_color="#ffffff"]Blue[/button]
[button size="medium" link="/" bg_color="#2ecc71" text_color="#ffffff"]Green[/button]

Top

Shortcode Documentation

  • id
    The id attribute specifies an id for an HTML element.
    It must be unique within the HTML document.
    (Mainly for additional styling/scripting purposes)
  • class
    The class attribute specifies a class name for an HTML element.
    (Mainly for additional styling/scripting purposes)
  • linking
    What to do when user clicks the button?
    Available Options:
    • default - open in the same window
    • new_window - open in a new window
    • lightbox - open in a lightbox
  • link
    The destination to which the link leads
  • lightbox_group
    Fill in this field, if you want different elements to be in one gallery
  • align
    Available Options:
    • left
    • center
    • right
  • size
    Available Options:
    • small
    • medium
    • big
  • type
    Available Options:
    • standard
    • wide
  • style
    Available Options:
    • simple
    • solid
  • icon
    Available Options:
    All icons available on Font Awesome site
  • title
  • text_color
    Text Color
  • bg_color
    Background Color