Shortcodes: Buttons & List

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.

[title type=”h2″ class=””]Buttons Options:[/title]

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

[raw]

[button class=”” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark Blue(Default)[/button]
[button class=”btn-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark BlueTransparent (Default)[/button]
[button class=”btn-white” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]White[/button]
[button class=”btn-white-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]WhiteTransparent[/button]
[button class=”btn-light” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light[/button]
[button class=”btn-light-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light Transparent[/button]
[button class=”btn-yellow” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow[/button]
[button class=”btn-yellow-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow Transparent[/button]

[/raw]

[code]
[button class=”” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark Blue(Default)[/button]
[button class=”btn-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark BlueTransparent (Default)[/button]
[button class=”btn-white” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]White[/button]
[button class=”btn-white-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]WhiteTransparent[/button]
[button class=”btn-light” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light[/button]
[button class=”btn-light-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light Transparent[/button]
[button class=”btn-yellow” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow[/button]
[button class=”btn-yellow-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow Transparent[/button]
[/code]

[title type=”h3″ class=””]Disabled Buttons[/title]

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

[raw]

[button class=”disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark Blue(Default)[/button]
[button class=”btn-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark BlueTransparent (Default)[/button]
[button class=”btn-white disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]White[/button]
[button class=”btn-white-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]WhiteTransparent[/button]
[button class=”btn-light disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light[/button]
[button class=”btn-light-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light Transparent[/button]
[button class=”btn-yellow disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow[/button]
[button class=”btn-yellow-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow Transparent[/button]

[/raw]

[code]
[button class=”disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark Blue(Default)[/button]
[button class=”btn-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Dark BlueTransparent (Default)[/button]
[button class=”btn-white disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]White[/button]
[button class=”btn-white-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]WhiteTransparent[/button]
[button class=”btn-light disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light[/button]
[button class=”btn-light-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Light Transparent[/button]
[button class=”btn-yellow disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow[/button]
[button class=”btn-yellow-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Yellow Transparent[/button]
[/code]

[title type=”h3″ class=””]Buttons Size[/title]

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

[raw]

[button class=”btn-lg” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Large Size[/button]  
[button class=” btn-lg btn-light-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Large Size[/button]

[button class=”” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Default Size[/button]  
[button class=”btn-orange btn-light-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Default Size[/button]

[button class=”btn-sm” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Small Size[/button]  
[button class=” btn-sm btn-light-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Small Size[/button]

[button class=”btn-black btn-xs” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Extra Small[/button]  
[button class=” btn-xs btn-light-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Extra Small[/button]

[/raw]

[code]
[button class=”btn-lg” link=”#” target=”_self”]Large Size[/button]  
[button class=”btn-lg btn-light-transparent” link=”#” target=”_self”]Large Size[/button]

[button class=”” link=”#” target=”_self”]Default Size[/button]  
[button class=”btn-light-transparent” link=”#” target=”_self”]Default Size[/button]

[button class=”btn-sm” link=”#” target=”_self”]Small Size[/button]  
[button class=” btn-sm btn-light-transparent” link=”#” target=”_self”]Small Size[/button]

[button class=”btn-xs” link=”#” target=”_self”]Extra Small[/button]  
[button class=” btn-xs btn-light-transparent” link=”#” target=”_self”]Extra Small[/button]
[/code]

[title type=”h2″ class=””]Custom Colored Buttons[/title]
[raw]

[button class=”” link=”#” bgcolor=”#739620″ textcolor=”#ffffff” bordercolor=”#4f6a10″ target=”_self”]#739620[/button]
[button class=”” link=”#” bgcolor=”#a54719″ textcolor=”#ffffff” bordercolor=”#884e31″ target=”_self”]#a54719[/button]
[button class=”” link=”#” bgcolor=”#5ca794″ textcolor=”#ffffff” bordercolor=”#64817a” target=”_self”]#5ca794[/button]

[/raw]

[code]
[button link=”#” bgcolor=”#739620″ textcolor=”#ffffff” bordercolor=”#4f6a10″ target=”_self”]#739620[/button]
[button link=”#” bgcolor=”#a54719″ textcolor=”#ffffff” bordercolor=”#884e31″ target=”_self”]#a54719[/button]
[button link=”#” bgcolor=”#5ca794″ textcolor=”#ffffff” bordercolor=”#64817a” target=”_self”]#5ca794[/button]
[/code]

Custom List Styles:

[row]
[col type=”4″ class=”col-sm-4″]

Minus

[list type=”minus”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Links

[list type=”links”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Text Files

[list type=”files”]

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

[/list]
[/col]
[/row]
[row]
[col type=”4″ class=”col-sm-4″]

Plus

[list type=”plus”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

OK list

[list type=”ok”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Videos

[list type=”videos”]

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

[/list]
[/col]
[/row]
[row]
[col type=”4″ class=”col-sm-4″]

Caret Right

[list type=”caret”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Stars

[list type=”stars”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Images

[list type=”images”]

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

[/list]
[/col]
[/row]
[row]
[col type=”4″ class=”col-sm-4″]

Chevron

[list type=”chevron”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Folders

[list type=”folders”]

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

[/list]
[/col]
[col type=”4″ class=”col-sm-4″]

Games

[list type=”games”]

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

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

Bordered Chevron List

[list type=”bordered_chevron”]

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

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