Buttons & Lists

Shortcodes is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

Buttons Options:

Use any of the available button classes to quickly create a styled link/button.

[button target=”_self” style=”” class=”” disabled=”active” size=”default” link=”#”]default[/button] [button target=”_self” style=”” class=”” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]Transparent[/button] [button target=”_self” style=”” class=”btn-black” disabled=”” size=”default” link=”#”]black[/button] [button target=”_self” style=”” class=”btn-black” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]Black Transparent[/button]

[button target=”_self” style=”” class=”btn-red” disabled=”” size=”default” link=”#”]red[/button] [button target=”_self” style=”” class=”btn-red” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]red transparent[/button] [button target=”_self” style=”” class=”btn-yellow” disabled=”” size=”default” link=”#”]yellow[/button] [button target=”_self” style=”” class=”btn-yellow” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]yellow transparent[/button]

[button target=”_self” style=”” class=”btn-green” disabled=”” size=”default” link=”#”]green[/button] [button target=”_self” style=”” class=”btn-green” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]green transparent[/button] [button target=”_self” style=”” class=”btn-gray” disabled=”” size=”default” link=”#”]gray[/button] [button target=”_self” style=”” class=”btn-gray” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]gray transparent[/button]

[code]
[button target=”_self” style=”” class=”” disabled=”active” size=”default” link=”#”]default[/button]
[button target=”_self” style=”” class=”” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]Transparent[/button]
[button target=”_self” style=”” class=”btn-black” disabled=”” size=”default” link=”#”]black[/button]
[button target=”_self” style=”” class=”btn-black” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]Black Transparent[/button]
[button target=”_self” style=”” class=”btn-red” disabled=”” size=”default” link=”#”]red[/button]
[button target=”_self” style=”” class=”btn-red” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]red transparent[/button]
[button target=”_self” style=”” class=”btn-yellow” disabled=”” size=”default” link=”#”]yellow[/button]
[button target=”_self” style=”” class=”btn-yellow” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]yellow transparent[/button]
[button target=”_self” style=”” class=”btn-green” disabled=”” size=”default” link=”#”]green[/button]
[button target=”_self” style=”” class=”btn-green” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]green transparent[/button]
[button target=”_self” style=”” class=”btn-gray” disabled=”” size=”default” link=”#”]gray[/button]
[button target=”_self” style=”” class=”btn-gray” disabled=”” transparent=”btn-transparent” size=”default” link=”#”]gray transparent[/button]
[/code]

Disabled Buttons

Add the disabled attribute to buttons to make them look unclickable (fading them back 50%)

[button target=”_self” style=”” class=”” disabled=”disabled” size=”default” link=”#”]default[/button] [button target=”_self” style=”” class=”” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]Transparent[/button] [button target=”_self” style=”” class=”btn-black” disabled=”disabled” size=”default” link=”#”]black[/button] [button target=”_self” style=”” class=”btn-black” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]Black Transparent[/button]

[button target=”_self” style=”” class=”btn-red” disabled=”disabled” size=”default” link=”#”]red[/button] [button target=”_self” style=”” class=”btn-red” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]red transparent[/button] [button target=”_self” style=”” class=”btn-yellow” disabled=”disabled” size=”default” link=”#”]yellow[/button] [button target=”_self” style=”” class=”btn-yellow” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]yellow transparent[/button]

[button target=”_self” style=”” class=”btn-green” disabled=”disabled” size=”default” link=”#”]green[/button] [button target=”_self” style=”” class=”btn-green” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]green transparent[/button] [button target=”_self” style=”” class=”btn-gray” disabled=”disabled” size=”default” link=”#”]gray[/button] [button target=”_self” style=”” class=”btn-gray” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]gray transparent[/button]

[code]
[button target=”_self” style=”” class=”” disabled=”disabled” size=”default” link=”#”]default[/button]
[button target=”_self” style=”” class=”” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]Transparent[/button]
[button target=”_self” style=”” class=”btn-black” disabled=”disabled” size=”default” link=”#”]black[/button] [button target=”_self” style=”” class=”btn-black” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]Black Transparent[/button]
[button target=”_self” style=”” class=”btn-red” disabled=”disabled” size=”default” link=”#”]red[/button]
[button target=”_self” style=”” class=”btn-red” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]red transparent[/button]
[button target=”_self” style=”” class=”btn-yellow” disabled=”disabled” size=”default” link=”#”]yellow[/button] [button target=”_self” style=”” class=”btn-yellow” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]yellow transparent[/button]
[button target=”_self” style=”” class=”btn-green” disabled=”disabled” size=”default” link=”#”]green[/button] [button target=”_self” style=”” class=”btn-green” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]green transparent[/button]
[button target=”_self” style=”” class=”btn-gray” disabled=”disabled” size=”default” link=”#”]gray[/button]
[button target=”_self” style=”” class=”btn-gray” disabled=”disabled” transparent=”btn-transparent” size=”default” link=”#”]gray transparent[/button]
[/code]

Buttons Size

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

[button target=”_self” style=”” class=”” disabled=”” size=”small” link=”#”]small size[/button] [button target=”_self” style=”” class=”btn-default” disabled=”” size=”default” link=”#”]default size[/button] [button target=”_self” style=”” class=”btn-primary” disabled=”” size=”large” link=”#”]large size[/button]

[code]
[button target=”_self” style=”” class=”” disabled=”” size=”small” link=”#”]small size[/button]
[button target=”_self” style=”” class=”btn-default” disabled=”” size=”default” link=”#”]default size[/button] [button target=”_self” style=”” class=”btn-primary” disabled=”” size=”large” link=”#”]large size[/button]
[/code]

Custom Colored Buttons

[button target=”_self” style=”background-color:#739620;color:#ffffff;border:1px solid #4f6a10;” class=”” disabled=”” size=”default” link=”#”]#739620[/button]   [button target=”_self” style=”background-color:#a54719;color:#ffffff;border:1px solid #884e31;” class=”” disabled=”” size=”default” link=”#”]#a54719[/button]   [button target=”_self” style=”background-color:#5ca794;color:#ffffff;border:1px solid #64817a;” class=”” disabled=”” size=”default” link=”#”]#5ca794[/button]

[code]
[button target=”_self” style=”background-color:#739620;color:#ffffff;border:1px solid #4f6a10;” class=”” disabled=”” size=”default” link=”#”]#739620[/button]
[button target=”_self” style=”background-color:#a54719;color:#ffffff;border:1px solid #884e31;” class=”” disabled=”” size=”default” link=”#”]#a54719[/button]
[button target=”_self” style=”background-color:#5ca794;color:#ffffff;border:1px solid #64817a;” class=”” disabled=”” size=”default” link=”#”]#5ca794[/button]
[/code]

Custom List Styles:

[row]
[col type=”4″]

Arrows

[list type=”arrows”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Checklist

[list type=”checklist”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Remove

[list type=”remove”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[/row]
[row]
[col type=”4″]

Links

[list type=”links”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Chevron

[list type=”chevron”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Thumbs up

[list type=”thumbs”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[/row]
[row]
[col type=”4″]

Music

[list type=”music”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Questions

[list type=”questions”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Download

[list type=”download”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[/row]
[row]
[col type=”4″]

Text Files

[list type=”text”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Hand Right

[list type=”hand”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[col type=”4″]

Ok list

[list type=”ok”]

• List item 1
• List item 2
• List item 3

[/list]
[/col]
[/row]