Buttons & Lists

[title type=”h1″ class=””]Shortcodes: Buttons & List[/title]

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”]White (Default)[/button]
[button class=”btn-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]White Transparent (Default)[/button]
[button class=”btn-black” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Black[/button]
[button class=”btn-black-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Black Transparent[/button]
[button class=”btn-orange” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Orange[/button]
[button class=”btn-orange-transparent” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Orange Transparent[/button]

[/raw]

[code]
[button class=”” link=”#” target=”_self”]White (Default)[/button]
[button class=”btn-transparent” link=”#” target=”_self”]White Transparent (Default)[/button]
[button class=”btn-black” link=”#” target=”_self”]Black[/button]
[button class=”btn-black-transparent” link=”#” target=”_self”]Black Transparent[/button]
[button class=”btn-orange” link=”#” target=”_self”]Orange[/button]
[button class=”btn-orange-transparent” link=”#” target=”_self”]Orange 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”]White (Default)[/button]
[button class=”btn-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]White Transparent (Default)[/button]
[button class=”btn-black disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Black[/button]
[button class=”btn-black-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Black Transparent[/button]
[button class=”btn-orange disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Orange[/button]
[button class=”btn-orange-transparent disabled” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Orange Transparent[/button]

[/raw]

[code]
[button class=”disabled” link=”#” target=”_self”]White (Default)[/button]
[button class=”btn-transparent disabled” link=”#” target=”_self”]White Transparent (Default)[/button]
[button class=”btn-black disabled” link=”#” target=”_self”]Black[/button]
[button class=”btn-black-transparent disabled” link=”#” target=”_self”]Black Transparent[/button]
[button class=”btn-orange disabled” link=”#” target=”_self”]Orange[/button]
[button class=”btn-orange-transparent disabled” link=”#” target=”_self”]Orange 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-black btn-lg” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Large Size[/button]  
[button class=”btn-orange btn-lg” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Large Size[/button]

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

[button class=”btn-black btn-sm” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Small Size[/button]  
[button class=”btn-orange btn-sm” 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-orange btn-xs” link=”#” bgcolor=”” textcolor=”” bordercolor=”” target=”_self”]Extra Small[/button]

[/raw]

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

[button class=”btn-black” link=”#” target=”_self”]Default Size[/button]  
[button class=”btn-orange” link=”#” target=”_self”]Default Size[/button]

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

[button class=”btn-black btn-xs” link=”#” target=”_self”]Extra Small[/button]  
[button class=”btn-orange btn-xs” 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]

[title type=”h2″ class=””]Custom List Styles:[/title]
[row]
[col type=”4″ class=””]
[title type=”h3″ class=””]Arrows[/title]
[list type=”list-caret-right” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Checklist[/title]
[list type=”list-check” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Remove[/title]
[list type=”list-remove” class=””]

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

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

[row]
[col type=”4″ class=””]
[title type=”h3″ class=””]Links[/title]
[list type=”list-external-link” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Chevron[/title]
[list type=”list-chevron-sign-right” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Thumbs up[/title]
[list type=”list-thumbs-up” class=””]

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

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

[row]
[col type=”4″ class=””]
[title type=”h3″ class=””]Music[/title]
[list type=”list-music” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Questions[/title]
[list type=”list-question-sign” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Download[/title]
[list type=”list-download” class=””]

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

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

[row]
[col type=”4″ class=””]
[title type=”h3″ class=””]Text Files[/title]
[list type=”list-file-text-alt” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]Hand Right[/title]
[list type=”list-hand-right” class=””]

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

[/list]
[/col]
[col type=”4″ class=””]
[title type=”h3″ class=””]OK list[/title]
[list type=”list-ok” class=””]

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

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